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

　　同胞拥有相同的父元素。 通过 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. Leetcode: Capacity To Ship Packages Within D Days

    A conveyor belt has packages that must be shipped from one port to another within D days. The i-th p ...

  2. flutter中使用shared_preferences的存储

    添加依赖 shared_preferences: ^+ 工具类 import 'dart:async'; import 'package:shared_preferences/shared_prefe ...

  3. Android输入法遮挡了输入框，使用android:fitsSystemWindows="true"后界面顶部出现白条解决方案

    我的最外层是LinearLayout,自定义CustomLinearLayout继承LinearLayout,重写fitSystemWindows和onApplyWindowInsets两个方法: p ...

  4. Python不带参数的类装饰器

    # -*- coding: utf-8 -*- # author:baoshan # 不带参数的类装饰器 # 类装饰器的实现,必须实现__call__和__init__两个内置函数. # __init ...

  5. .NET Core入门程序

    易百教程 https://www.yiibai.com/dotnet_core/dotnet_core_getting_started.html

  6. gitlab 配置到jenkins

    直接把公匙配到了gitlab,然后填入jenkins https://blog.csdn.net/zhufengyan521521/article/details/81219193  配置全局凭据 h ...

  7. Eclipse下代码字体背景变红/变绿/变黄原因

    如下图所示:不知道怎么,在eclipse IDE手抖按了啥,就成这样了. 后来在stackoverflow提问后,找到了原因.eclipse 有测试代码覆盖率的功能,也就是执行Run——>Cov ...

  8. 毫无PS痕迹 你的第一本Photoshop书 完整版

    毫无PS痕迹 你的第一本Photoshop书 目录 <毫无PS痕迹-你的本Photoshop书>全书分为四大部分: 第1.2章讲解色彩和图像的原理与基础知识要点. 第3至11章全面讲解了使 ...

  9. java 连接 mongodb 及使用

    MongoDB是当今非常流行的一款NoSQL数据库,本文介绍如何使用MongoDB的Java驱动来操作MongoDB. 一.引入MongoDB Java Driver包 如果需要操作MongoDB的J ...

  10. Python - Django - 模板语言之自定义过滤器

    自定义过滤器的文件: 在 app01 下新建一个 templatetags 的文件夹,然后创建 myfilter.py 文件 这个 templatetags 名字是固定的,myfilter 是自己起的 ...