jQuery取得父元素節點、子元素節點及兄弟元素節點的方法_jquery

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

先來看這段html程式碼，整個取節點（父、子、兄弟等）的方法都是圍繞著這段程式碼來的：

<ul class="par">
  <li id="firstli">
    <h3 id="条目一">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

JQUERY 父節點的取得：

jquery取得父元素方法比較多、例如parent()、parents()、closest()、find,first-child這些都能幫你實作查找父節點、子節點、兄弟節點

如我們利用parent()來取得父節點

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

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

1、closest從當前元素開始匹配尋找、parents從父元素開始匹配尋找

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

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

程式碼可以這樣寫：

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY 兄弟節點的取得

jQuery兄弟節點取得、我們的想法是透過目前節點找到父節點、然後透過父節點去找出子節點、程式碼如下

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

還有一個方法是使用 siblings() 函數、程式碼如下

$(".title").siblings('ul');
//找到自己的兄弟节点ul

JQUERY 子節點的取得

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

$(".par:first-child");
//取得id为firstli的节点

透過選擇器去取得、程式碼如下:

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

使用find()函數、上面已經說過了、用法一樣

$("#firstli").find("h3");
//找到子兄弟节点h3

使用children()函數、程式碼如下

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery遍歷演算法與技巧總結》、《jQuery表格(table)操作技巧總結》 、《jQuery拖曳特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效總結》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程式設計有所幫助。