ホームページ > 記事 > ウェブフロントエンド > JQuery のparent()、parents()、parentsUntil() の違いとその使用方法に関するチュートリアル
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 サイトの他の関連記事を参照してください。