注:expr是指可选的参数,包含用于匹配元素的选择器表达式。

  .siblings(expr) ---查找所有兄弟(包括哥哥和弟弟)

  .next(expr) ---查找紧挨着的弟弟

  .nextAll(expr) ---查找所有的弟弟

  .nextUntil(expr) ---查找所有弟弟,直到碰到符合expr条件,不包含符合expr条件的那个元素

  .prev(expr) ---查找紧挨着的哥哥

  .prevAll(expr) ---查找所有哥哥

  .prevUntil(expr) ---查找所有哥哥,直到碰到符合expr条件,不包含符合expr条件的那个元素

测试代码:

 <body>
<div class="first">
<a href="#">我是a标签</a>
<h1>我是h1</h1>
<p>我是第1个p</p>
<p>我是第2个p</p>
<p>我是第3个p</p>
<h3>我是h3</h3>
<p class="qq">我是类为qq的第四个p</p>
<p>我是第五个p</p>
<h2>我是h2</h2>
</div>
</body>

测试1:让第一个p元素的所有兄弟改变背景颜色。

$('p:first').siblings().css('background','pink')

效果:

测试2:把第一个p元素的所有h2的元素改变。

$('p:first').siblings('h2').css('background','pink')

效果:

 测试3:把第一个p元素的下一个弟弟元素改变。

$('p:first').next().css('background-color','red')

效果:

测试4:把第一个p元素的所有弟弟元素改变。

$('p:first').nextAll().css('background','yellow')

效果:

 测试5:把第一个p元素,直到有类为qq的元素出现,的所有弟弟元素改变。

$('p:first').nextUntil('.qq').css({'font-size':20,background:'red'})

效果

prev与next是一样的,只不过一个是哥哥,一个是弟弟,同样的prevAll和nextAll,prevUntil和nextUntil也基本一样,不再重复测试。

jquery 找同胞系列siblings() ,next() ,nextAll(), nextUntil(), prev(), prevAll(), prevUntil()的更多相关文章

  1. siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() 在 DOM 树中水平遍历

    $(document).ready(function(){ $("h2").siblings(); });拿到h2标签的所有的同级元素什么标签都可以 $(document).rea ...

  2. jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()

    <body> <div id="main"> <div id="hot" class="rightbar"&g ...

  3. jQuery 遍历同胞(siblings)

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  4. jQuery 遍历 – 同胞(siblings)

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  5. jQuery 遍历 - 同胞(siblings)

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  6. jQuery遍历-同胞

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  7. siblings,next,prev

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 siblings() next() nextAll() nextUntil() pre ...

  8. Jquery全选系列操作(锋利的jQuery)

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  9. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

随机推荐

  1. 【leetcode】412. Fizz Buzz

    problem 412. Fizz Buzz solution: class Solution { public: vector<string> fizzBuzz(int n) { vec ...

  2. [LeetCode&Python] Problem 202. Happy Number

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  3. Beanshell断言

    Beanshell断言示例一:通过从数据库查询结果集,和从接口返回中解析json格式的返回内容,比较两者来验证sample请求是否成功 1>先通过JDBC PreProcessor把测试计划中所 ...

  4. centOS连接没问题,使用SecureCRT就不能连接

    原因: 将NAT模式改为自定义的模式即可:

  5. 常见模块(三) pickle模块和json模块

    (一)json和pickle的区别 1.json是不同编程语言实现数据交换的工具,他是用来把python中的数据对象转换成字符串或者写入文件中的,再由其他语言通过json加载进来. 2.pickle是 ...

  6. mysql与mysqli的区别

    博客搬家了,欢迎大家关注,https://bobjin.com mysqli连接是永久连接,而MySQL是非永久连接. mysql连接:每当第二次使用的时候,都会重新打开一个新的进程. mysqli连 ...

  7. Python开发 基礎知識 2.變量 ( *arg, **kwargs )

    變量 *args 和 **kwargs ( *和**為本體,名稱為通俗的名稱約定 ) *args 用於函式定義. 可將不定數量的參數傳遞給一個函數,傳入函式的引數,會先以Tuple物件收集,再設定給參 ...

  8. winform中devexpress bindcommand无效的解决方法

    正常绑定,编译运行无报错,但无法执行command fluentAPI.BindCommand(commandButton, (x, p) => x.DoSomething(p), x => ...

  9. MySQL 命令(导出数据):mysqldump

    官方网址:https://dev.mysql.com/doc/refman/8.0/en/mysqldump.html

  10. Redis 集群知识点及命令

    Redis 集群命令 备注 cluster nodes 查看集群包含的节点 cluster meet <ip> <port> 将 ip 和 port 所指定的节点添加到 nod ...