上期我们讲了遍历的祖先和后代的问题，现在我们讲讲遍历同胞

　　同胞拥有相同的父元素。 通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

　　jQuery siblings() 方法

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

　　下面的例子返回所有同胞元素：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .siblings *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

     $("h2").siblings().css({"color":"red","border":"2px solid red"});

 });

 </script>

 </head>

 <body class="siblings">

 <div>div (父元素)

   <p>p</p>

   <span>span</span>

   <h2>h2</h2>

   <h3>h3</h3>

   <p>p</p>

 </div>

 </body>

 </html>

　　jQuery next() 方法

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

　　该方法只返回一个元素。

　　下面的例子返回h2的下一个同胞元素：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .siblings *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

     $("h2").next().css({"color":"red","border":"2px solid red"});

 });

 </script>

 </head>

 <body class="siblings">

 <div>div (父元素)

   <p>p</p>

   <span>span</span>

   <h2>h2</h2>

   <h3>h3</h3>

   <p>p</p>

 </div>

 </body>

 </html>

　　jQuery nextAll() 方法

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .siblings *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

     $("h2").nextAll().css({"color":"red","border":"2px solid red"});

 });

 </script>

 </head>

 <body class="siblings">

 <div>div (父元素)

   <p>p</p>

   <span>span</span>

   <h2>h2</h2>

   <h3>h3</h3>

   <p>p</p>

 </div>

 </body>

 </html>

　　jQuery nextUntil() 方法

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <style>

 .siblings *

 {

     display: block;

     border: 2px solid lightgrey;

     color: lightgrey;

     padding: 5px;

     margin: 15px;

 }

 </style>

 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

 $(document).ready(function(){

     $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

 });

 </script>

 </head>

 <body class="siblings">

 <div>div (父元素)

   <p>p</p>

   <span>span</span>

   <h2>h2</h2>

   <h3>h3</h3>

   <h4>h4</h4>

   <h5>h5</h5>

   <h6>h6</h6>

   <p>p</p>

 </div>

 </body>

 </html>

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

jQuery遍历(2)的更多相关文章

  1. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  2. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

  3. Jquery遍历选中的input标签

    $("input[name='chkAgent']:[checked]").each(function () { alert($(this).attr("value&qu ...

  4. jquery遍历

    http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和 ...

  5. jQuery 遍历(上)

    目录: 一:定义二:遍历 DOM三:jQuery 参考手册 - 遍历 定义:什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找" ...

  6. jquery 遍历 数组1

    使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...

  7. JQuery：JQuery遍历详解

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

  8. jquery遍历对象,数组,集合

    1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

  9. jQuery 遍历函数(w3school)

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法.   函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .childr ...

  10. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

随机推荐

  1. DbSet.Attach（实体）与DbContext.Entry（实体）.State = EntityState.Modified 区别

    当你使用这个DbSet.Update方法时,实体框架将你实体的所有属性标记为EntityState.Modified,所以跟踪它们.如果你只想更改部分属性,而不是全部属性,请使用DbSet.Attac ...

  2. 【转载】 DeepMind发表Nature子刊新论文：连接多巴胺与元强化学习的新方法

    原文地址: baijiahao.baidu.com/s?id=1600509777750939986&wfr=spider&for=pc 机器之心 18-05-15   14:26 - ...

  3. 对有序特征进行离散化（继承Spark的机器学习Estimator类）

    采用信息增益或基尼指数寻找最优离散化点 package org.apache.spark.ml.feature import org.apache.spark.sql.SparkSession imp ...

  4. 一、jenkins下载及安装

    一.安装 官网地址:https://jenkins.io/zh/ 1.下载war包,放到tomcat——>webapps下,双击bin——>startup.bat启动 2.打开命令提示符. ...

  5. linux非root用户安装jdk1.8

    如题,先到 Oracle 官方网站 下载1.8版本的 JDK 压缩包(jdk-8u221-linux-x64.tar.gz)到本地(如D盘的soft目录),然后开始进入linux的非root用户(如w ...

  6. ES6深入浅出-11 ES6新增的API（上）-2.Array新增API

    Array.form 把不是数组的东西变成数组.最常见的就是把伪数组变成数组 那么什么是伪数组 这就是伪数组,因为它不是继承自Array的原型的对象.它只是一个看起来很像数组的数组 只看下面的代码.a ...

  7. 软件定义网络基础---SDN数据平面

    主要介绍SDN架构和转发模型 一:传统网络设备 (一)传统设备控制平面和数据平面 (二)数据平面的任务 数据平面对数据包的处理,主要通过查询由控制平面所生成的转发信息表来完成 (三)传统网络数据平面数 ...

  8. SBX(Simulated binary crossover)模拟二进制交叉算子和DE(differential evolution)差分进化算子

    一起来学演化计算-SBX(Simulated binary crossover)模拟二进制交叉算子和DE(differential evolution)差分进化算子 觉得有用的话,欢迎一起讨论相互学习 ...

  9. Jrebel激活方法(转)

    本次服务长期稳定提供给各位同学使用哦!服务器地址:https://jrebel.qekang.com/{GUID}在线GUID地址:在线生成GUID如果失效刷新GUID替换就可以!打开jrebel 激 ...

  10. 【线段树】HDU 1166 敌兵布阵

    这道题目是线段树里面最基础的单点更新问题. 设计的知识点包括线段树的单点更新和区间查询. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 G++ ...