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
您可能感興趣的文章:
相關文章
jQuery實現(xiàn)的下雪動畫效果示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的下雪動畫效果,涉及jQuery插件結合setInterval、animate進行動畫操作的相關使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-02-02
jQuery中bind(),live(),delegate(),on()綁定事件方法實例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結合實例形式詳細分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對比分析了四種方式的異同點,需要的朋友可以參考下2016-01-01
JQuyer $.post 與 $.ajax 訪問WCF ajax service 時的問題需要注意的地方
我注意到,當在jquery中使用$.post()后,默認的contentType是application/x-www-form-urlencoded 形式進行了urlencoded - 當我的asp.net MVC代碼需要的contentType=application/json2011-09-09
jquery獲取復選框checkbox的值的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取復選框checkbox的值的簡單實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05

