同胞拥有相同的父元素。

通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素。


在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <span> 的所有同胞元素:

$("span").siblings();

您也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <span> 的同胞元素的所有 class属性为"c1"的同胞元素:

$("span").siblings(".c1")

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <span> 的下一个同胞元素:

$("span").next();

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 <span> 的所有跟随的同胞元素:

$("span").nextAll();

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:

$("h2").nextUntil("h6");

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

jQuery遍历-同胞的更多相关文章

  1. jQuery 遍历 – 同胞(siblings)

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

  2. jQuery 遍历同胞(siblings)

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

  3. jQuery 遍历 - 同胞(siblings)

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

  4. JQuery:JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  5. jQuery 遍历用法

    jQuery 遍历 DOM 树 parent() 方法返回被选元素的直接父元素(找爸爸). parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (找长辈). parents ...

  6. 常用的jquery遍历函数

    1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...

  7. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  8. jQuery遍历文档(重要)

    什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...

  9. jQuery遍历DOM

    jQuery提供了多种遍历DOM的方法.遍历方法中最大的种类是树遍历. 向上遍历DOM树 parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素,它一直遍历到根元素 ...

随机推荐

  1. vue.js使用props在父子组件之间传参

    本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...

  2. Python3常用网络编程模块介绍

    一.socket模块 网络服务都是建立在socket基础之上的,socket是网络连接端点,是网络的基础:每个socket都被绑定到指定的IP和端口上: 1.首先使用socket(family=AF_ ...

  3. Java Web开发 - 持久型/存储型XSS漏洞

    Java Web开发 - 持久型/存储型XSS漏洞 1.什么是XSS漏洞攻击? XSS是跨站脚本攻击(Cross Site Scripting)的简称,之所以叫XSS而不是CSS相比大家都能明白了吧, ...

  4. 156个Python网络爬虫资源

    本列表包含Python网页抓取和数据处理相关的库. 网络相关 通用 urllib - 网络库(标准库) requests - 网络库 grab - 网络库(基于pycurl) pycurl - 网络库 ...

  5. 百分比相对计算注意事项CSS3

    百分比计算 1.涉及元素定位,和大小计算,基于元素自身的包含块. 2.元素背景图的大小计算,位置计算,基于元素自身的宽,高. 2.元素图片边框使用的图图片大小计算,基于元素自身的宽,高.

  6. Android Gesture 手势创建以及使用示例

    在Android1.6的模拟器里面预装了一个叫Gestures Builder的程序,这个程序就是让你创建自己的手势的(Gestures Builder的源代码在sdk问samples里面有,有兴趣可 ...

  7. 如何两周达到150行Java程序的能力--part 1

    面向对象程序先导课是体系化面向对象课程的重要组成部分,其目标是帮助那些有一定C语言基础,但对面向对象概念陌生,基本没碰过Java编程的同学.该课程设计为暑期选修课,因为没有其他课程,我们设计为现场训练 ...

  8. mysql 报错 session halted的解决办法,实际工作中的结论。

    写后台程序,发现执行到sql语句时就报错session halted,如下图: 也上网搜过蛮多方法,都不能解决我的问题.后来自己发现了症结所在,其实很简单:执行insert的语句没有包含not nul ...

  9. Linq to Objects for Java 发布 1.0.1 版本

    现在 java 支持 linq 啦.比原生 stream api 更好用,功能更强大.现已发布 version 1.0.1 地址: https://github.com/timandy/linq. A ...

  10. /dev/null 2>&1解释

    /dev/null 2>&1 解释 crontab内容 :50 18 5-30 * * /script/myscript.sh 1> /dev/null 2>&1 其 ...