首頁 > web前端 > js教程 > 主體

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

巴扎黑
發布: 2017-06-24 09:28:18
原創
2042 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板