Basic introduction and detailed explanation of usage of prev + next selector in jQuery

jQuery's prev + next selector is used to match the sibling next element immediately following the prev element and encapsulate it as a jQuery object and return.

Note: The search range of the selector next must be the next element adjacent to the "prev element" and must be a sibling element of the "prev element".

Grammar

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

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 and may affect reading.

Parameters

Parameter Description

prev A valid selector.

next A valid selector.

Return value

Returns a jQuery object that encapsulates the DOM element that matches the selector next in the next sibling element immediately adjacent to the "prev element".

Although there is at most one next sibling element immediately adjacent to a "prev element", there can be multiple "prev elements", so there can also be multiple matched DOM elements, and they are all encapsulated in in the returned jQuery object.

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, we want to find the next sibling p tag adjacent to the p tag, then You can write the following jQuery code:

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

Next, we find the next sibling span tag adjacent to the span tag, then you can write the following jQuery code:

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

Find and contain the class name a The next sibling span tag adjacent to the span tag, the corresponding jQuery code is as follows:

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

Find the next sibling span tag adjacent to the p tag, the corresponding jQuery code is as follows:

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

The above is the detailed content of Basic introduction and detailed explanation of usage of prev + next selector in jQuery. For more information, please follow other related articles on the PHP Chinese website!