對jQuery中prev + next選擇器的基本介紹及用法詳解

jQuery的prev + next選擇器用於匹配緊接在prev元素後面的同儕next元素，將其封裝為jQuery對象並返回。

注意：選擇器next的查找範圍必須是與"prev元素"相鄰的下一個元素，並且必須是"prev元素"的同輩元素。

語法

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

+號兩側的空格可以省略，但不建議省略，否則字元過於緊密可能影響閱讀。

參數

參數 說明

prev 一個有效的選擇器。

next 一個有效的選擇器。

傳回值

傳回封裝了與"prev元素"緊鄰的下一個同儕元素中、符合選擇器next的DOM元素的jQuery物件。

雖然與一個"prev元素"緊鄰的下一個同輩元素最多只有一個，但是"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");

接著，我們查找與span標籤相鄰的下一個同輩span標籤，則可以編寫如下jQuery代碼：

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

查找與包含類名a的span標籤相鄰的下一個同儕span標籤，對應的jQuery程式碼如下：

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

找出與p標籤相鄰的下一個同儕span標籤，對應的jQuery程式碼如下：

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

以上是對jQuery中prev + next選擇器的基本介紹及用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！