jQuery 遍歷 siblings 方法

2021-07-02 06:50:41 字數 773 閱讀 2287

jquery 遍歷參考手冊

查詢每個 p 元素的所有類名為 "selected" 的所有同胞元素:

$("p").siblings(".selected")
親自試一試

siblings() 獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。

.siblings(selector)
引數

描述selector

字串值,包含用於匹配元素的選擇器表示式。

如果給定乙個表示 dom 元素集合的 jquery 物件,.siblings() 方法允許我們在 dom 樹中搜尋這些元素的同胞元素,並用匹配元素構造乙個新的 jquery 物件。

該方法接受可選的選擇器表示式,與我們向 $() 函式中傳遞的引數型別相同。如果應用這個選擇器,則將通過檢測元素是否匹配該選擇器對元素進行篩選。

請思考這個帶有基本的巢狀列表的頁面:

如果我們從第三個專案開始,則可找到該元素的同胞元素:

$('li.third-item').siblings().css('background-color', 'red');
親自試一試

此處呼叫的結果是將專案 1、2、4 和 5 的背景設定為紅色。 設定為紅色背景。由於我們未應用選擇器表示式,所有同胞元素很自然地成為了物件的一部分。如果已應用選擇器,則只會包含四個列表中的匹配的專案。

原始元素不包含在同胞元素中,當我們打算找到 dom 樹的特定層級上的所有元素時,記住一點很重要。

jQuery 遍歷函式

jquery 遍歷函式包括了用於篩選 查詢和串聯元素的方法。函式描述 add 將元素新增到匹配元素的集合中。andself 把堆疊中之前的元素集新增到當前集合中。children 獲得匹配元素集合中每個元素的所有子元素。closest 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素。c...

jquery優化 遍歷

與使用選擇符查詢頁面中的元素相對應,jquery遍歷操作背後的工作機制也很有特色。了解了jquery對dom進行遍歷背後的工作機制,可以在編寫 時有意識地避免一些不必要的重複操作,從而提公升 的效能。本文就從jquery的遍歷機制入手簡單 一下優化jquery 的問題。jquery內部維護著乙個jq...

jQuery 遍歷 同胞

同胞擁有相同的父元素。通過 jquery,您能夠在 dom 樹中遍歷元素的同胞元素。有許多有用的方法讓我們在 dom 樹進行水平遍歷 siblings 方法返回被選元素的所有同胞元素。下面的例子返回p 效果圖 您也可以使用可選引數來過濾對同胞元素的搜尋。下面的例子返回屬於 next 方法返回被選元素...