jQueryのprev+nextセレクターの基本的な使い方と使い方を詳しく解説

jQuery の prev + next セレクターは、 prev 要素の直後にある兄弟の next 要素を照合し、それを jQuery オブジェクト としてカプセル化して返します。

注: セレクター next の検索範囲は、「prev 要素」に隣接する次の要素であり、「prev 要素」の兄弟要素である必要があります。

文法

// 这里的prev表示具体的选择器
// 这里的next表示具体的选择器
jQuery( "prev + next" )

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

パラメータ

パラメータの説明

prev 有効なセレクター。

next 有効なセレクター。

戻り値

「prev 要素」のすぐ隣にある次の兄弟要素内のセレクター next に一致する DOM 要素をカプセル化する jQuery オブジェクトを返します。

「prev 要素」のすぐ隣にある次の兄弟要素は最大 1 つですが、複数の「prev 要素」が存在する可能性があるため、複数の一致する DOM 要素が存在する可能性があり、それらはすべて返された jQuery オブジェクトの中央にカプセル化されます。 。

対応する一致が見つからない場合は、空の jQuery オブジェクトが返されます。

例と説明

次の HTML コードを例に挙げます:

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

さて、p タグに隣接する次の兄弟 p タグを見つけたい場合は、次の jQuery コードを記述できます:

// 选择了id为n5的一个元素
$("p + p");

次に、スパンタグに隣接する次の兄弟スパンタグを見つけるには、次のjQueryコードを書くことができます:

// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span");

クラス名aを含むスパンタグに隣接する次の兄弟スパンタグを見つけるには、対応するjQueryコードは次のとおりです。 :

// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a，因此无法匹配其next——n9
$("span.a + span");

p タグに隣接する次の兄弟のspanタグを検索します。対応するjQueryコードは次のとおりです:

// 返回一个空的jQuery对象
// HTML中虽然有span标签，但不是p标签的同辈元素，而是其子代或后代
$("p + span");

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