jQuery 選擇器(prev ~ siblings)詳解

jQuery的prev ~ siblings選擇器用於匹配prev元素之後的所有同儕的siblings元素，將其封裝為jQuery物件並傳回。

注意：選擇器siblings的尋找範圍必須是"prev元素"之後的元素，並且是同儕元素(即與"prev元素"有同一個的父元素)。

語法

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

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

參數

參數 說明

prev 一個有效的選擇器。

siblings 一個有效的選擇器。

傳回值

傳回封裝了位於"prev元素"之後的同儕元素中、符合選擇器siblings的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");

接著，我們查找位於id為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 選擇器(prev ~ siblings)詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！