ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery のparent()、parents()、parentsUntil() の違いとその使用方法に関するチュートリアル

JQuery のparent()、parents()、parentsUntil() の違いとその使用方法に関するチュートリアル

巴扎黑
巴扎黑オリジナル
2017-06-24 09:28:182038ブラウズ

parent() は実際には非常に単純で、セレクター内の各要素の外層を指定するだけです。たとえば、$("p") の場合、結果は

のように

でラップされたデータになります。複数の

がある場合、結果セットは オブジェクト のセットになります。 eq(i)、first()、last() を使用して検索できます。データが

  • の使用方法 $("p").parent("li") の場合、クエリ結果は空になります。

    です。

    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");

    直接の親が選択されている1つまたは複数を見つけると理解できます。

    つまり、parent() はあまり実用的ではありません。

    parents() は、セレクター内の各要素のすべての親です。セレクターに複数の親がある場合、結果セットを返します。結果セットの結果は、内層から外層に向かって配置されます。最も外側のレイヤーは html 要素 全体であり、最初のレイヤーはセレクター内の各要素をしっかりとラップする要素です。結果セットには重複する要素はありません。

    同様に、パラメーターが取得されると、指定された要素も結果セット内で見つかります

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

    したがって、セレクターの特定の父親を見つけたい場合は、最初にすべての親を見つけてから、父親を見つける必要があります。

    現在の要素の親を見つけたい場合は、次の構文が使用されます。

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

    つまり、parents() は非常に実用的です。非常によく使われます。

    両親まで(expr)。 parents() が HTML 要素全体のセレクター内の各要素のすべての親を検索する場合、parentsUntil() の機能は検索範囲を制限することです。この範囲は $(expr).html()

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

    です。上記 2 つのの結果セットは 1 つの要素 (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 だけが見つかります。 parentsUntil() は結果セット内の最大の親を ul>* として返し、find は ul>* の子孫要素内で ul>* を含まない要素を検索するためです。したがって、このメソッドを使用して ul>li を検索する場合、それは実現不可能です

    次のコードを使用して、ul (最初の行) の下のすべての li、最も近い ul (2 行目) の下のすべての li をクエリできます

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

    parentsUntil( expr) の場合、返される結果セットには expr 自体は含まれません。また、後で find() が使用される場合、結果セットの子孫要素でクエリが実行されるため、クエリの結果は expr の子要素ではなく、 2 世代目以降の子要素。

    親の成績を考慮して、一般的には使用することはお勧めしません。

    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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。