jQuery 遍歷 - siblings() 方法
定義和用法
siblings() 獲得匹配集合中每個(gè)元素的同胞,通過選擇器進(jìn)行篩選是可選的。
語法
.siblings(selector)
參數(shù) | 描述 |
---|---|
selector | 字符串值,包含用于匹配元素的選擇器表達(dá)式。 |
詳細(xì)說明
如果給定一個(gè)表示 DOM 元素集合的 jQuery 對象,.siblings() 方法允許我們在 DOM 樹中搜索這些元素的同胞元素,并用匹配元素構(gòu)造一個(gè)新的 jQuery 對象。
該方法接受可選的選擇器表達(dá)式,與我們向 $() 函數(shù)中傳遞的參數(shù)類型相同。如果應(yīng)用這個(gè)選擇器,則將通過檢測元素是否匹配該選擇器對元素進(jìn)行篩選。
請思考這個(gè)帶有基本的嵌套列表的頁面:
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
如果我們從第三個(gè)項(xiàng)目開始,則可找到該元素的同胞元素:
$('li.third-item').siblings()
.css('background-color', 'red');
此處調(diào)用的結(jié)果是將項(xiàng)目 1、2、4 和 5 的背景設(shè)置為紅色。 設(shè)置為紅色背景。由于我們未應(yīng)用選擇器表達(dá)式,所有同胞元素很自然地成為了對象的一部分。如果已應(yīng)用選擇器,則只會包含四個(gè)列表中的匹配的項(xiàng)目。
原始元素不包含在同胞元素中,當(dāng)我們打算找到 DOM 樹的特定層級上的所有元素時(shí),記住一點(diǎn)很重要。