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

　　同胞拥有相同的父元素。 通过 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. NodeVisitor

    /* -*-c++-*- OpenSceneGraph - Copyright (C) 1998-2006 Robert Osfield * * This library is open source ...

  2. python locust--Setups, Teardowns, on_start, and on_stop .

    创建一个locust测试脚本,如下: from locust import HttpLocust, TaskSet, task class UserBehavior(TaskSet): def set ...

  3. 戒邪淫利器：《楞严经　四种清净明诲》实例及原经文 (转自学佛网：http://www.xuefo.net/nr/article55/545256.html)

    今日得持首楞严,不读天下糟粕书! 当你读完楞严经后就会很真实的升起这个感觉!根本觉得其他书都是多余的!所以<楞严经>还是要多读,多看!并且<楞严经>戒淫的效果特别好!好好的珍惜 ...

  4. Spring Boot 使用YAML配置

    YAML是JSON的一个超集,可以非常方便地将外部配置以层次结构形式存储起来.当项目的类路径中有SnakeYAML库(spring-boot-starter中已经被包含)时,SpringApplica ...

  5. Python - Django - 母版和继承

    可以把多个页面相同的部分提取出来,放在一个母板里,这些页面只需要继承这个母板就好了 通常会在母板中定义页面专用的 CSS 块和 JS 块,方便子页面替换 定义块: {% block 名字 %} {% ...

  6. 【物联网】arduino wifi

    https://www.arduino.cn/forum.php?mod=viewthread&tid=49561 http://dy.163.com/v2/article/detail/DC ...

  7. css代码陷阱

    1.选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  9. Jmeter学习——测试计划元件【转】

    1. Test Plan (测试计划) 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说本次性能测试的所有内容是于基于一个计划的. 下面看一下一个计划下面都有哪些主要的功能模块(右键单击 ...

  10. etcd学习之安装与命令

    ETCD学习 下载etcd #下载 wget https://github.com/etcd-io/etcd/releases/download/v3.3.18/etcd-v3.3.18-linux- ...