jQueryの子セレクターの親＞子の使い方を詳しく解説

jQueryの親>子セレクター(子セレクター)は、親要素のすべての子要素を照合し、それらをjQueryオブジェクトにカプセル化して返すために使用されます。

注: セレクターの子の検索範囲は、「孫」以降の要素を除いた、「親要素」の子孫要素である必要があります。

すべての子孫要素の中から検索したい場合は、子孫セレクター(ancestor descendant)を使用します。

文法

// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

> 記号の両側のスペースは省略できますが、省略すると文字が近づきすぎて読みにくくなる可能性があるため、省略することはお勧めしません。パラメータ

パラメータ Parent に有効な親セレクタを記述します。个Child は、親選択の子要素と一致するためにのみ使用される効果的なサブセレクショナです。

戻り値

準拠する JQuery オブジェクトに戻り、親要素内で見つかった条件子要素をパックします。

親セレクターに一致する DOM 要素が見つからない場合、または親セレ​​クターに一致する DOM 要素内に子孫セレクターに一致する子要素が見つからない場合は、空の jQuery オブジェクトが返されます。

親セレクターに一致する親 DOM 要素が複数存在する場合があり、1 つの親 DOM 要素内に複数の子 DOM 要素が存在する場合があります。返される jQuery オブジェクトは、条件を満たすすべての DOM 要素をカプセル化します。

例と説明

次の HTML コードを例として挙げます:

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>

ここで、p タグ内のすべての scan サブ要素を一度に検索したい場合は、次の jQuery コードを記述できます:

// 选择了id分别为n3、n5的两个元素
// n6不是p标签的子元素，而是孙子辈的元素，因此无法匹配
$("p > span");

次に、span タグの span 子要素を見つけるには、次の jQuery コードを記述します:

// 选择了id为n6的一个元素
$("span > span");

すべての

要素セレクター

(*) を一緒に使用して、孫要素のみを検索するセレクターを実装できます。例: ID n1 の要素の孫の spam タグを検索したいとします。対応する jQuery コードは次のとおりです:

// 选择了id分别为n3、n5的两个元素
$("#n1 > * > span");

以上がjQueryの子セレクターの親＞子の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。