首頁 > web前端 > js教程 > jQuery 選擇器(prev ~ siblings)詳解

jQuery 選擇器(prev ~ siblings)詳解

巴扎黑
發布: 2017-06-22 13:20:37
原創
1739 人瀏覽過

jQueryprev ~ 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板