当前位置:Gxlcms > JavaScript > jquery遍历函数siblings()用法实例

jquery遍历函数siblings()用法实例

时间:2021-07-01 10:21:17 帮助过:52人阅读

本文实例讲述了jquery遍历函数siblings()用法。分享给大家供大家参考,具体如下:

siblings([expr])

得到所有匹配元素集合中各个元素的所有兄弟元素集合。返回匹配元素集合

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <script src="jquery.js"></script>
  6. <script>
  7. $(document).ready(function(){
  8. var len = $(".hilite").siblings().css("color", "red").length;
  9. $("b").text(len);
  10. });
  11. </script>
  12. <style>
  13. ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  14. p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
  15. font-weight:bolder; }
  16. .hilite { background:yellow; }
  17. </style>
  18. </head>
  19. <body>
  20. <ul>
  21. <li>One</li>
  22. <li>Two</li>
  23. <li class="hilite">Three</li>
  24. <li>Four</li>
  25. </ul>
  26. <ul>
  27. <li>Five</li>
  28. <li>Six</li>
  29. <li>Seven</li>
  30. </ul>
  31. <ul>
  32. <li>Eight</li>
  33. <li class="hilite">Nine</li>
  34. <li>Ten</li>
  35. <li class="hilite">Eleven</li>
  36. </ul>
  37. <p>Unique siblings: <b></b></p>
  38. </body>
  39. </html>

代码如下:$(".hilite").siblings()

将得到包含特殊样式‘hilite'元素的所有兄弟元素集合。以下是匹配元素集合

  1. <li>One</li>
  2. <li>Two</li>
  3. <li>Four</li>
  4. <li>Eight</li>
  5. <li class="hilite">Nine</li>
  6. <li>Ten</li>
  7. <li class="hilite">Eleven</li>

希望本文所述对大家jQuery程序设计有所帮助。

人气教程排行