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

　　同胞拥有相同的父元素。 通过 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. prometheus + influxdb + grafana + mysql

    前言 本文介绍使用influxdb 作为prometheus持久化存储和使用mysql 作为grafana 持久化存储的安装方法 一 安装go环境 如果自己有go环境可以自主编译remote_stor ...

  2. 一台服务器部署多台tomcat

    如题,多个项目部署在一台服务器.减少容错性,觉得分开部署,这样一个tomcat挂了不会影响另一个项目.看配置和应用大小决定数量,一般四五个没问题,也有单台服务器部署8个tomcat稳定运行的. 下面记 ...

  3. Spring cloud微服务安全实战-4-11Zuul网关安全开发（四）

    限流,有个现成的开源项目可以帮助我们来做网关上的限流 用最新的这个版本 在pom.xml加入引用. 在限流的过程中需要存一些信息,可以存在数据库里 也可以存在redis里.这里我们演示存到数据库里 比 ...

  4. T-SQL_常用内置函数和操作

    作者:icyjiang 推荐:LinkEdu SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --从数据库表中删除数据行 UPDATE --更新数 ...

  5. 如何做ui自动化---步骤详解

    第一步: 得到功能测试的常规用例,查看是否可以进行自动化,要明确,自动化不是为了自动化而自动化,自动化是节省人力,主要做回归测试,如果变动性特别大,不建议做自动化,具体可查看其它文章“什么适合做自动化 ...

  6. Python - Django - 在 CBV 中使用装饰器

    urls.py: from django.conf.urls import url from app02 import views urlpatterns = [ # app02 url(r'^app ...

  7. 线性回归:boston房价

    from sklearn.linear_model import LinearRegression,Lasso,Ridge from sklearn.datasets import load_bost ...

  8. Swift4.0复习错误处理

    1.Swift中错误的表示: “在Swift中如果我们要定义一个表示错误的类型非常简单,只需遵循 Error 协议即可.我们通常用枚举或结构体类型来表示错误类型,当然枚举可能用得更多些,因为它能更直观 ...

  9. html div高度100%无效

    移动端相关: div高度继承自父元素——>body——>html 解决方案: html,body { height: 100%;margin: 0; padding: 0;} 然后对应的d ...

  10. SpringMVC:学习笔记(11)——依赖注入与@Autowired

    SpringMVC:学习笔记(11)——依赖注入与@Autowired 使用@Autowired 从Spring2.5开始,它引入了一种全新的依赖注入方式,即通过@Autowired注解.这个注解允许 ...