jQuery遍历(2)

2019-08-14 10:34:35来源:博客园 阅读 ()

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

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

  jQuery siblings() 方法

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .siblings *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19     $("h2").siblings().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24 
25 <div>div (父元素)
26   <p>p</p>
27   <span>span</span>
28   <h2>h2</h2>
29   <h3>h3</h3>
30   <p>p</p>
31 </div>
32 
33 </body>
34 </html>

  jQuery next() 方法

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

  该方法只返回一个元素。

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .siblings *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19     $("h2").next().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24 
25 <div>div (父元素)
26   <p>p</p>
27   <span>span</span>
28   <h2>h2</h2>
29   <h3>h3</h3>
30   <p>p</p>
31 </div>
32 
33 </body>
34 </html>

  jQuery nextAll() 方法

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .siblings *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19     $("h2").nextAll().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24 
25 <div>div (父元素)
26   <p>p</p>
27   <span>span</span>
28   <h2>h2</h2>
29   <h3>h3</h3>
30   <p>p</p>
31 </div>
32 
33 </body>
34 </html>

  jQuery nextUntil() 方法

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .siblings *
 7 { 
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19     $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24 
25 <div>div (父元素)
26   <p>p</p>
27   <span>span</span>
28   <h2>h2</h2>
29   <h3>h3</h3>
30   <h4>h4</h4>
31   <h5>h5</h5>
32   <h6>h6</h6>
33   <p>p</p>
34 </div>
35 
36 </body>
37 </html>

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


原文链接:https://www.cnblogs.com/songtianfa/p/11328415.html
如有疑问请与原作者联系

标签:QCOM问题HTML方法方式

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue.js(4)--字符串跑马灯

下一篇:基于 Lerna 管理 packages 的 Monorepo 项目最佳实践