jquery遍歷函數(shù)siblings()用法實例

更新時間：2015年12月24日 10:18:22 作者：cui_angel

這篇文章主要介紹了jquery遍歷函數(shù)siblings()用法,結(jié)合實例形式較為詳細的分析了jquery的siblings函數(shù)用于元素遍歷的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jquery遍歷函數(shù)siblings()用法。分享給大家供大家參考，具體如下：

siblings([expr])

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
 <script src="jquery.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>

復制代碼代碼如下:

$(".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>

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法,結(jié)合實例形式分析了jQuery樹形插件zTree針對節(jié)點的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03
通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
相信大家喜歡這個界面無非也是喜歡它的動態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網(wǎng)頁上模仿這種效果，就貼出來給大家噴一下。雖然是一些很低級的技術(shù)，但是也希望有需要的朋友可以參考下
2013-07-07
EasyUI學習之DataGird分頁顯示數(shù)據(jù)
這篇文章主要介紹了EasyUI學習之DataGird分頁顯示數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
QRCode.js：基于JQuery的生成二維碼JS庫的使用
本篇文章主要介紹了QRCode.js：基于JQuery的生成二維碼JS庫的使用，具有一定的參考價值，有興趣的同學可以了解一下
2017-06-06
jQuery 右下角滑動彈出可關(guān)閉重現(xiàn)層完整代碼
經(jīng)常看到網(wǎng)頁右下角有滑動彈出的廣告，這種效果可以使用jQuery彈出層實現(xiàn)。本實例使用jQuery實現(xiàn)右下角滑動彈出可關(guān)閉重現(xiàn)層
2012-10-10
jquery.Jwin.js 基于jquery的彈出層插件代碼
測試頁面需要引用jquery的js文件插件文件jquery.Jwin.js jquery.Jwin插件的使用參數(shù)都有詳細說明
2012-05-05
jquery dialog open后,服務器端控件失效的快速解決方法
本篇文章是對jquery dialog open后,服務器端控件失效的快速解決方法。進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
JQUERY實現(xiàn)左側(cè)TIPS滑進滑出效果示例
左側(cè)提示滑進滑出的平滑效果使用jQuery實現(xiàn)，具體代碼及截圖如下，感興趣的朋友可以參考下哈，希望對大家學習jquery有所幫助
2013-06-06
分享14個很酷的jQuery導航菜單插件
本文介紹了14個很酷的jQuery導航菜單插件，它們夠漂亮、簡單，并且完全兼容各種類型的web瀏覽器。
2011-04-04
一個簡單的jQuery計算器實現(xiàn)了連續(xù)計算功能
這篇文章主要介紹了一個簡單的jQuery計算器主要實現(xiàn)了連續(xù)計算功能,需要的朋友可以參考下
2014-07-07