注: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. easyui,文件引用

  2. Java并发--Java线程面试题 Top 50

    原文链接:http://www.importnew.com/12773.html 不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Ja ...

  3. macbook hive安装

    1 原材料 1.1 已经安装好的伪分布式hadoop,版本2.8.3(参见链接https://www.cnblogs.com/wooluwalker/p/9128859.html) 1.2 apach ...

  4. 为WebService添加身份验证的两种方法

    方法一:SoapHeader 辅助类:MySoapHeader //SoapHeader 添加引用 using System.Web.Services.Protocols; #region 配置登录标 ...

  5. Windows下struct和union字节对齐设置以及大小的确定(一 简介和结构体大小的确定)

    在windows下设置字节对齐大小的方式,目前我了解有三种: 1. 在编译程序时候的编译选项  /Zp[n],如 cl /Zp4 表示对齐大小是4字节: 2. 预处理命令   #pragma pack ...

  6. PHP的 preg_match_all

    语法:int preg_match_all ( string pattern, string subject, array &matches [, int flags] ) 这个函数的返回值是 ...

  7. Linux内核分析第九次作业

    理解进程调度时机跟踪分析进程调度与进程切换的过程 一.基础知识 Linux系统的一般执行过程 一般情况:正在运行的用户态进程X切换到运行用户态进程Y的过程 1. 正在运行的用户态进程X 2. 发生中断 ...

  8. 2.2 如何在Visio中写上、下角标

    快捷键:下标[“Ctrl”+ “=”] 上标[“Ctrl”+“shift”+“=”]

  9. unity的一些tips

    主要是我知乎上回答的一个关于unity的tip,备忘. 说说我所看到unity相关的,不好的习惯: 1 尽量不要在Awake(), start()等函数内加入业务逻辑的初始化代码.首先无法简便的直接启 ...

  10. Flask--(登录注册)抽取视图函数

    视图函数抽取: 在info目录下准备视图业务模块包:modules 在modules中添加首页模块包index 在index包的__init__中导入蓝图 在index的__init__创建蓝图 在i ...