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
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
- jQuery插件开发全解析 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash