JQuery的prev+next選擇器

一 介紹

prev + next選擇器用于匹配所有緊接在prev元素后的next元素。其中，prev和next是兩個(gè)相同級(jí)別的元素。

prev + next選擇器的使用方法如下：

$("prev + next");

prev是指任何有效的選擇器。

next是一個(gè)有效選擇器并緊接著prev選擇器。

例如，要匹配<p>標(biāo)記后的<img>標(biāo)記，可以使用下面的jQuery代碼：

$("p + img");

二 應(yīng)用

篩選緊跟在<lable>標(biāo)記后的<p>標(biāo)記并改變匹配元素的背景顏色為淡藍(lán)色。

三 代碼

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<style type="text/css">
	.background{background:#cef}
	body{font-size:12px;}
</style>
<p>
 <label>第一個(gè)label</label>
 <p>第一個(gè)p</p>
 <fieldset>
 <label>第二個(gè)label</label>
 <p>第二個(gè)p</p>
 </fieldset>
</p>
<p>p外面的p</p>
<script type="text/javascript" charset="GBK">
 $(document).ready(function() {
 $("label+p").addClass("background"); //為匹配的元素添加CSS類
});
</script

四 運(yùn)行結(jié)果

五 運(yùn)行說明

看到“第一個(gè)p”和“第二個(gè)p”的段落被添加了背景，而“p外面的p”由于不是label元素的同級(jí)元素，所以沒有被添加背景。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com