DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 樹形結構的選擇器
jQuery 樹形結構的選擇器
編輯:JQuery特效代碼     

DOM結構其實也是一種樹形結構,jQuery提供的樹形選擇器可以用來選擇DOM Tree裡的節點。這些樹形選擇器的方法包括: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)的個數,“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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved