首頁 > web前端 > js教程 > 對jQuery中prev + next選擇器的基本介紹及用法詳解

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

巴扎黑
發布: 2017-06-22 09:39:24
原創
1852 人瀏覽過

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

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