同胞拥有相同的父元素。

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


在 DOM 树中水平遍历

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

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

jQuery siblings() 方法

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

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

实例

$(document).ready(function(){
  $("h2").siblings();
});

尝试一下 »

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

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素:

实例

$(document).ready(function(){
  $("h2").siblings("p");
});

尝试一下 »


jQuery next() 方法

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

该方法只返回一个元素。

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

实例

$(document).ready(function(){
  $("h2").next();
});

尝试一下 »


jQuery nextAll() 方法

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

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

实例

$(document).ready(function(){
  $("h2").nextAll();
});

尝试一下 »


jQuery nextUntil() 方法

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

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

实例

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

尝试一下 »


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

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

 

jQuery 遍历同胞(siblings)的更多相关文章

  1. jQuery 遍历 – 同胞(siblings)

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

  2. jQuery 遍历 - 同胞(siblings)

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

  3. jQuery遍历-同胞

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

  4. JQuery:JQuery遍历详解

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

  5. jQuery 遍历用法

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

  6. jQuery遍历文档(重要)

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

  7. 常用的jquery遍历函数

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

  8. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  9. jquery遍历DOM方法总结

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

随机推荐

  1. Ignatius and the Princess IV

    Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32767 K ( ...

  2. Toad for Oracle 使用文档

    Toad®for Oracle 版本 12.0.1 发行说明 30 July 2013 目录 欢迎使用 Toad for Oracle 版本更新 解决的问题和改进 已知问题 第三方已知问题 升级和兼容 ...

  3. 常用开源GIS项目

    常用开源GIS项目     常用开源桌面GIS软件 QGIS 始于2002年5月,算得上是开源GIS平台中的后起之秀.界面友好,分析功能可与GRASS GIS相媲美.主页:http://www.qgi ...

  4. [转]SVN的trunk branch tag

    Subversion有一个很标准的目录结构,是这样的.比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/|+-trunk+-branches+-ta ...

  5. Jquery扩展- 倒计时

    Source Code (function($) { $.fn.countdown = function(options) { // default options var defaults = { ...

  6. 电源管理之pmu驱动分析

    电源管理芯片可以为多设备供电,且这些设备电压电流有所不同.为这些设备提供的稳压器代码模型即为regulator. 说白了regulator就是稳压器,它提供电源供给.简单的可以gpio操作,高电平开电 ...

  7. Kth Ancestor 第k个祖先问题

    题目出处 这道题目出自hackerrank的8月月赛的第三题. 题目大意: 先给出一棵树 之后有三种操作分别为:加边,查询,和删除一个节点 查询的时候要给出任意节点x的第k个祖先 每组数据有t个cas ...

  8. Yii PHP 框架分析(二)

    Yii PHP 框架分析(二)作者:wdy http://hi.baidu.com/delphiss/blog/item/54597af595085ad3f3d38552.html Yii是基于组件( ...

  9. java数据结构-非线性结构之树

    一.树状图 树状图是一种数据结构,它是由n(n>=1)个有限节点组成的具有层次关系的集合.因其结构看起来想个倒挂的树,即根朝上,叶子在下,故被称为"树". 特点: 1. 每个 ...

  10. 更改Sublimetext3的主题文件,改变某些不喜欢的颜色

    使用的主题是Monokai(SL),主题很好看,但是注释和内容选中的颜色看起来跟没有一个样,看起来很淡,所以稍微改一下主题文件的颜色.