JQuery中parent()，parents()，parentsUntil()區別聯繫以及使用方法教程

parent()其實很簡單， 就是指定選擇器中每個元素的外邊的一層。例如$("p")，那麼就是結果就是包裹著

的資料 如：

。如果有多個

則結果集為物件集。可以用eq(i)，first(),last()定位。若資料為

• 怎麼使用$("p").parent("li")查詢的結果為空，因為

  的外層為< ;p>。

  JQuery手冊中

  <p><p>Hello</p></p><p class="selected"><p>Hello Again</p></p>

  <pre class="brush:php;toolbar:false">$("p").parent(".selected");

  //结果:

  [ <p class="selected"><p>Hello Again</p></p> ]

  
  

  可以理解為

  $("p").parent().find(".selected");

  找直接父親中類為selected的那一個或幾個。

  所以parent()的實用性不強。

  parents()就是選擇器中每個元素的所有的父親，如果選擇器有多個父親則回傳的是個結果集。結果集的結果是由內層向外層排列的。最外層就是整個html元素了，第一個就是緊貼選擇器中每個元素的元素。結果集中並沒有重複的元素。

  同理當帶參數時，也是在結果集中find製定的元素

  $("p").parents(".selected");

  $("p").parents().find(".selected");

  因此我們想找到選擇器的某個父親，就要先找到他的所有父親，然後在find這個父親。

  當我們想找出目前元素的某個父親的時候，下面的文法就要用到了。

  $(this).parents("li");//$(this).parents().find("li");

  所以parents()的實用性很強。非常常用。

  parentsUntil(expr)。如果說parents()是在整個html元素中找選擇器中每個元素的所有父親，那麼parentsUntil()的作用就是限制了查找的範圍。這個範圍就是 $(expr).html()

  $("p").parents();//包含整个html 元素$("p").parentsUntil("html");//不包含整个html元素

  以上兩個表達式的結果集只相差一個元素，就是整個html元素。

  $("p").parents();//包含整个html 元素$("p").parentsUntil();//包含整个html元素

  當parentsUntil()不帶參數時，他等同於parents();

  parentsUntil(expr)的結果集中的結果同樣是由內層向外層排列的。 parentUntil(expr),會從第一個包裹著元素父元素開始向外逐層查找，直到遇到第一個與表達式(expr)相符的元素為止。

  $("p").parentsUntil(expr);

  相當於在$(expr)中由內之外的尋找$("p")中每個元素的所有父元素

  為了更精準的尋找到指定的元素，可以如下的使用。

  $("p").parentsUntil("ul").find("li");

  但以上做法不能找到ul>li，只能找到ul * li。因為paentsUntil()傳回結果集中最大的父親是ul>*而find是在ul>*的後代元素尋找不包含ul>*的元素。所以如果用該方法查找ul>li是不可行的

  可以使用以下程式碼查詢全部ul下的li（第一行），最近的ul下的所有li（第二行）

  $("p").parents("ul").find("li");$("p").parents("ul").eq(0).find("li");

  parentsUntil(expr),傳回的結果集不包括expr本身，而後面如果使用find()又會在結果集後代元素中查詢，所以查詢得到的結果不是expr的子元素而是二代和二代以後的子元素。

  鑑於parentsUntil的表現，一般不建議使用。

  parnetsUntil()可用來找出某個模組下的某些元素。

  當我們要具體對結果集中某個元素進行操作是，要記得使用eq(i),first(),last()等函數取值，不然操作的是整個結果集。

  動態尋找父節點

  $(this).parent("li");//找到第一个包住$(this)的dom，如这个dom是li则返回他的对象，如果不是则返回空对象$(this).parents("li");//找到所有$(this)的父亲，并在其中找出所有的li的对象，组成结果集。结果集中结果由内之外排列$(this).parents().find("li");//同上。$(this).parents("li").eq(0);//$(this)外第一个包裹他的li对象$(this).parentsUntil("li");//$(this)外到第一个包裹他的li之内的所有的$(this)的父亲$(this).parentsUntil("ul").find("li");//$(this)在ul之前的那个父亲之内（不包括该父亲）找所有的li;如果<ul><li><p><a onclick="f()">中a是this的话，那么相当于$("li").find("li");最后结果之空。$(this).parents("li").sublings();//查找所在的li的所有同辈元素

  與parent()對應的函數是children()

  與parents()對應的函數是find()

  以上是JQuery中parent()，parents()，parentsUntil()區別聯繫以及使用方法教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！