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

　　同胞拥有相同的父元素。 通过 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. oracle11g 查询临时表空间的使用率和正在使用临时表空间的用户

    转: oracle11g 查询临时表空间的使用率和正在使用临时表空间的用户 原创 Oracle 作者:记录每一次错误 时间:2018-12-21 15:46:33 11179 0 今天开发反映说临时表 ...

  2. DEBUG技巧1 SE37将参数保存为测试数据

    1. SE37调试函数的时候,将参数保存为测试数据,供下次调试使用, 或者参考标准的赋值进行赋值 2. SE37 ->执行-> 测试序列 测试函数: CO_XT_COMPONENTS_DE ...

  3. Python - Django - session 的基本使用

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

  4. JSON 多层对象获取键值

    <html> <script> window.onload = function(){ var json = { "options":{ "nam ...

  5. Connection reset by peer引发的思考

    http://www.mamicode.com/info-detail-506381.html

  6. idm技术下载百度网盘

    原使用教程:https://www.haorenka.org/idm.html 使用idm下载器后实际下载速度,比原网盘客户端快很多 相关软件下载 参考上面的参考教程,这里只提供对应所需要的文件,有的 ...

  7. [US Open 2004][luogu2342] 叠积木 [带权并查集]

    题面 洛谷传送门 思路 害 学了4年多OI,第一次知道还有带权并查集这个东西 wtcl 这个玩意儿的原理和详细实现,可以参考这个博客:带权并查集传送门 这道题,就是在带权并查集的基础上,加个维护每个集 ...

  8. idea查看接口及类的关系继承(UML)图

    选中接口或类 显示结果: 如果需要添加其他的接口或类:点击右键 添加需要的接口或类: 显示结果:

  9. iOS 13 DeviceToken获取发生变化

    问题描述: iOS 13 通过[deviceToken description]获取到的内容已经变了,这段代码运行在 iOS 13 上已经无法获取到准确的DeviceToken字符串了, NSStri ...

  10. 在Jetty中部署Jenkins遇到的问题

    1. Jetty 9.0.3 启动时的错误: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 [root@kvm-guest jetty-9.0.3]# java -jar star ...