jquery遍历函数siblings()

本文转自：http://blog.csdn.net/cui_angel/article/details/7896883

siblings([expr])

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

<span style="font-size:18px;">    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      "http://www.w3.org/TR/html4/loose.dtd">    <html>    <head>    <script src="http://code.jquery.com/jquery-latest.js"></script>    <script>    $(document).ready(function(){     var len = $(".hilite").siblings()     .css("color", "red")     .length;     $("b").text(len);     });     </script>    <style>    ul { float:left; margin:5px; font-size:16px; font-weight:bold; }     p { color:blue; margin:10px 20px; font-size:16px; padding:5px;      font-weight:bolder; }     .hilite { background:yellow; }     </style>    </head>    <body>    <ul>    <li>One</li>    <li>Two</li>    <li class="hilite">Three</li>    <li>Four</li>    </ul>    <ul>    <li>Five</li>    <li>Six</li>    <li>Seven</li>    </ul>    <ul>    <li>Eight</li>    <li class="hilite">Nine</li>    <li>Ten</li>    <li class="hilite">Eleven</li>    </ul>    <p>Unique siblings: <b></b></p>    </body>    </html>    </span>

<span style="font-size:18px;">    <span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <script>  $(document).ready(function(){  var len = $(".hilite").siblings()  .css("color", "red")  .length;  $("b").text(len);  });  </script>  <style>  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;   font-weight:bolder; }  .hilite { background:yellow; }  </style>  </head>  <body>  <ul>  <li>One</li>  <li>Two</li>  <li class="hilite">Three</li>  <li>Four</li>  </ul>  <ul>  <li>Five</li>  <li>Six</li>  <li>Seven</li>  </ul>  <ul>  <li>Eight</li>  <li class="hilite">Nine</li>  <li>Ten</li>  <li class="hilite">Eleven</li>  </ul>  <p>Unique siblings: <b></b></p>  </body>  </html>  </span>  </span>

$(".hilite").siblings()
将得到包含特殊样式‘hilite’元素的所有兄弟元素集合。以下是匹配元素集合

<li>One</li>
<li>Two</li>
<li>Four</li>
<li>Eight</li>
<li class="hilite">Nine</li>
<li>Ten</li>
<li class="hilite">Eleven</li>

注意：上面之所以会同时出现<li class="hilite">Nine</li>和<li class="hilite">Eleven</li>，是因为他们彼此之间都是各自的兄弟元素，所以在使用siblings()方法时会把彼此都给读取出来。

jquery遍历函数siblings()相关推荐

知识点六：jQuery遍历-同胞Siblings(), next(), nextAll()
jQuery遍历-同胞从同级元素之后遍历添加Siblings(),next(),nextAll(),nextUtil(), 在同级元素之前面进行遍历添加prev(),prevAll(),prevUn ...
jQuery 遍历函数
.add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元 ...
jQuery遍历函数总结
http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 转载于:https://www.cnblogs.com/realsoul/p/5 ...
jQuery 遍历方法总结
遍历方法有:1.add(),用于把元素添加到匹配元素的集合中:2.children(),用于返回被选元素的所有直接子元素:3.closest(),用于返回被选元素的第一个祖先元素:4.contents ...
jQuery 遍历 (each、map)
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止 ...
JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着 ...
前端 -＞ jQuery 遍历
文章目录 jQuery 遍历 - 祖先 jQuery parentsUntil() 方法 jQuery 遍历 - 后代 jQuery 遍历 - 同胞(siblings) jQuery 遍历- 过滤详 ...
jquery遍历多个li_jQuery中10个非常有用的遍历函数
使用jQuery,可以很容易的选择HTML元素.但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情.在这篇教程中,我们将探讨十种方法去精炼和扩展我们将要操作的集合. HTM ...
jquery遍历元素children、find、parent、parents、parentsUntil、next、prev、siblings、closest、filter、not
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery遍历元素 jquery元素的函数包括children.find.parent.parents.parentsUn ...

jquery遍历函数siblings()

jquery遍历函数siblings()相关推荐

最新文章

热门文章