jQuery 樹形結構的選擇器
更新時間：2010年02月15日 15:08:54 作者：
樹形結構里的節(jié)點，如果它不是根部，也不是末枝，那么它一定有父母和孩子。
DOM結構其實也是一種樹形結構，jQuery提供的樹形選擇器可以用來選擇DOM Tree里的節(jié)點。這些樹形選擇器的方法包括：children(), parent(), parents(), next(), prev(), siblings().
選擇某個元素的"孩子" - children()
復制代碼 代碼如下:
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#parent").children().length //得到所有的”孩子“(li)的個數(shù)，“3”
$("#parent").children("#son1").text(); //得到第一個”孩子“(li)的值 - “第一列”
選擇某個元素的“父母” - parent()
復制代碼 代碼如下:
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son1").parent().attr("id");//得到ul的ID - "parent"
選擇某個元素的“祖先”-parents() (注意：一級一級向上選擇直到<html>)
復制代碼 代碼如下:
<div id="grand">
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
</div>
$("#son2").parents().each(function(i){
if(i<3) //只顯示3代祖先
alert($(this).html());
});
選擇某個元素的“弟弟” - next()
復制代碼 代碼如下:
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").next().text(); //選擇#son3選擇某個元素的“哥哥”
prev()
復制代碼 代碼如下:
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").prev().text(); //選擇#son1選擇某個元素的“兄弟”
siblings()
復制代碼 代碼如下:
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").siblings().text(); //選擇#son1和#son3
您可能感興趣的文章:
相關文章
最近對js以及jq產生了濃厚的興趣，看到jq有很多很好用的插件，功能各異，包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。2010-02-02
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jQuery級聯(lián)菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
使用jquery的朋友不得不看的,jquery ui接口，提升jquery的效率2008-09-09
jQuery是目前最流行的 JavaScript 庫。對于初學者來說，有的時候很難找到一個好的學習jQuery的網站，今天本文收集了12個很棒的 jQuery 學習網站推薦給大家。2011-04-04
這篇文章主要介紹了jQuery圖片加載失敗替換默認圖片方法匯總,運用到的相關知識jquery的ready方法、$("img").error()、img的complete屬性、插件imagesLoaded、事件委托、事件捕獲和圖片預加載的方法等，需要的朋友可以參考下2017-11-11
瀑布流布局在目前貌似很火爆，具體的分析、原理、用到的知識等等可以看看以下幾位牛人寫的東西2012-10-10
基于jQuery Tipso插件實現(xiàn)消息提示框特效
這篇文章主要介紹了基于jQuery Tipso插件實現(xiàn)消息提示框特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
為了提高加載速度，有個想法就是推遲外部JS加載，有興趣的朋友可以參考下，接下來詳細介紹實現(xiàn)方法2013-01-01
基于jquery獲取指定樣式的參數(shù)信息。2010-07-07
jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)氣泡圖效果,結合完整實例形式分析了jQuery插件HighCharts繪制氣泡圖的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03