本文實例講述了jQuery獲取父元素節(jié)點、子元素節(jié)點及兄弟元素節(jié)點的方法。分享給大家供大家參考，具體如下：

先來看這段html代碼，整個取節(jié)點（父、子、兄弟等）的方法都是圍繞這段代碼來的：

<ul class="par">
  <li id="firstli">
    <h3 class="title">條目一</h3>
    <ul class="par">
      <li id="dwtedx">第一項</li>
      <li>第二項</li>
    </ul>
  </li>
</ul>

JQUERY 父節(jié)點的獲取：

jquery獲取父元素方法比較多、比如parent()、parents()、closest()、find,first-child這些都能幫你實現(xiàn)查找父節(jié)點、子節(jié)點、兄弟節(jié)點

如我們利用parent()來獲取父節(jié)點

$("#dwtedx").parent().parent();//取得id為firstli的li節(jié)點
$("#dwtedx").parent().parent(".par");//取得最上面的ul節(jié)點
$("#dwtedx").parent(".par");
//取得向上第一層的ul節(jié)點 以上是通過parent的方式來獲取父節(jié)點的、大家可以根據(jù)自己項目需要來選擇方法哈

下面、我們主要來講一下 parents() 和 closest() 兩個方法的區(qū)別

1、closest從當(dāng)前元素開始匹配尋找、parents從父元素開始匹配尋找

2、closest逐級向上查找、直到發(fā)現(xiàn)匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把這些元素放進一個臨時集合中、再用給定的選擇器表達式去過濾

3、closest返回0或1個元素、parents可能包含0 個、1個、或者多個元素

代碼可以這樣寫：

$('#dwtedx').parents('.par');//可以找出所有class為.par的節(jié)點
$('#dwtedx').closest('.par'); //可以找出一個父節(jié)點、就是上面一層的那個

JQUERY 兄弟節(jié)點的獲取

jQuery兄弟節(jié)點獲取、我們的思路是通過當(dāng)前節(jié)點找到父節(jié)點、然后通過父節(jié)點去找到子節(jié)點、代碼如下

$(".title").parent().find('ul');
//找到自己的兄弟節(jié)點ul 就是通過先找到 h3 與 ul 共同的父節(jié)點 li 然后來用 find() 找到 ul

還有一種方法是使用 siblings() 函數(shù)、代碼如下

$(".title").siblings('ul');
//找到自己的兄弟節(jié)點ul

JQUERY 子節(jié)點的獲取

匹配第一個子元素 :first 只匹配一個元素、而此選擇符將為每個父元素匹配一個子元素

$(".par:first-child");
//取得id為firstli的節(jié)點

通過選擇器去獲取、代碼如下:

$('#firstli h3.title');
//取得條目一的h3

使用find()函數(shù)、上面已經(jīng)說過了、用法一樣

$("#firstli").find("h3");
//找到子兄弟節(jié)點h3

使用children()函數(shù)、代碼如下

$("#firstli").children("h3.title");
//取得子節(jié)點h3、class為title 

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

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

最新評論