jQueryセレクターの詳しい解説（前編～兄弟編）

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

注: 兄弟セレクターの検索範囲は、「prev 要素」の後の要素であり、兄弟要素である必要があります (つまり、「prev 要素」と同じ親要素を持っています)。

文法

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

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

パラメータ

パラメータの説明

prev 有効なセレクター。

siblings 有効なセレクター。

戻り値

セレクターの兄弟に一致し、兄弟要素の「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");

その後、次のことがわかります。 n8 のspanタグの後の兄弟spanタグについては、次のjQueryコードを記述できます:

// 选择了id为n9的一个元素
// n7虽然也是n8的同辈元素，但不在n8之后，而是之前，因此匹配不到
$("#n8 ~ span");

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

// 选择了id分别为n4、n8、n9的三个元素
// n9属于n7的~siblings，也是n8的~siblings，同一个元素只计入一次
$("span ~ span");

以上がjQueryセレクターの詳しい解説（前編～兄弟編）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。