注: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. django 问题总结

    1.更新了pip之后还提示更新 // 卸载 pip uninstall pip // 重新安装 easy_install pip pip -V 2.时间比当前时间少8小时问题 // 设置setting ...

  2. IO流技术

    IO流常用基类 字节流的抽象基类:InputStream,OutputStream 字符流的抽象基类:Reader,Writer Writer类 子类:BufferedWriter,CharArray ...

  3. Post Order traverse binary tree using non-recursive way

    Process analysis Stack = 5,  Push 3, Stack = 5, 3.    Pre = 5 Current = 3, Pre = 5, Push 2 to the st ...

  4. Redis无法启动

    我的原因是:没有足够的可用空间 以往双击redis-server.exe就可以启动,但突然启动不了,只是弹出控制台一闪而过,之后就自动关闭了, 因为没看到具体错误,百度了下关键字”Redis无法启动“ ...

  5. 利用开源项目jadx反编译Android应用

    原文转自:http://bbs.itheima.com/thread-200475-1-1.html 利用开源项目jadx反编译Android应用 利用Github开源项目jadx可以直接对 .dex ...

  6. Android SDK的下载与安装

    一.Android SDK简介 Android SDK(Software Development Kit,软件开发工具包)被软件开发工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件 ...

  7. 接口测试基础——第3篇smtplib发送带图片的邮件

    smtplib发送邮件最后一篇,发送带图片的邮件: 大家可以去廖雪峰的网站看一下,下面的代码就是我跟着博客写的,哈哈,大家即使不明白为什么,也要多写两遍,记在心里,如果有不明白的地方可以留言,船长会第 ...

  8. 【python接口自动化框架-unittest】【一】unittest单元测试框架概念

    一.unittst单元测试框架 概念参考:https://docs.python.org/2/library/unittest.html 使用方法:import unittest (引入unittes ...

  9. uip移植telnetd并加入自己定义命令

    版权声明: https://blog.csdn.net/cp1300/article/details/30541507 刚刚移植了一下uip的telnetd,还是比較简单方便的. 首先加入文件,注意u ...

  10. 让docker容器开机启动

    网上有些文章说,要让docker 的容器自动在开机启动,是写脚本,比如在 rc.local 中写.其实完全没必要这么麻烦,docker 有相关指令,docker run 指令中加入 --restart ...