Detailed explanation of jQuery selector (prev ~ siblings)

jQuery'sprev ~ The siblings selector is used to match the siblings elements of all siblings after the prev element, encapsulate them into jQuery objects and return them.

Note: The search scope of the selector siblings must be the elements after the "prev element" and be sibling elements (that is, they have the same parent element as the "prev element").

Grammar

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

The spaces on both sides of the ~ symbol can be omitted, but it is not recommended to omit them, otherwise the characters may be too close together to affect reading.

Parameters

Parameter Description

prev A valid selector.

siblings A valid selector.

Return value

Returns a jQuery object that encapsulates the DOM elements that match the selector siblings and are located in the sibling elements after the "prev element".

If no corresponding match is found, an empty jQuery object is returned.

Example & Description

Take the following HTML code as an example:

<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>

Now, if we want to find the peer p tag after the p tag, we can write the following jQuery Code:

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

Next, we find the sibling span tags located after the span tag with id n8, then we can write the following jQuery code:

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

Find the sibling span tags located after the span tag, The corresponding jQuery code is as follows:

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

The above is the detailed content of Detailed explanation of jQuery selector (prev ~ siblings). For more information, please follow other related articles on the PHP Chinese website!