siblings · TUNA-daily

## 1. 作用 > 查找元素的所有兄弟節點元素 ~~~ $("p").siblings(".selected") ~~~ > 1. 查找p標簽元素的所有兄弟元素，得到的元素集合不包含本身 > 2. siblings() 獲得匹配集合中每個元素的同胞，通過選擇器進行篩選是可選的。 ## 2. 語法 ~~~ .siblings(selector) ~~~ selector 字符串值，包含用于匹配元素的選擇器表達式，用于對兄弟元素進行篩選。 > 詳細說明： > 如果給定一個表示 DOM 元素集合的 jQuery 對象，.siblings() 方法允許我們在 DOM 樹中搜索這些元素的同胞元素，并用匹配元素構造一個新的 jQuery 對象。 > 該方法接受可選的選擇器表達式，與我們向 $() 函數中傳遞的參數類型相同。如果應用這個選擇器，則將通過檢測元素是否匹配該選擇器對元素進行篩選。請思考這個帶有基本的嵌套列表的頁面： ~~~ <!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <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> <script> $('li.third-item').siblings().css('background-color', 'red'); </script> </body> </html> ~~~ ![](https://box.kancloud.cn/1f8559f16e0cedbbabdf01d07bb372a2_1730x362.png) 查找third-item類的元素的所有兄弟元素，并設置背景顏色。此處調用的結果是將項目 1、2、4 和 5 的背景設置為紅色。設置為紅色背景。由于我們未應用選擇器表達式，所有同胞元素很自然地成為了對象的一部分。如果已應用選擇器，則只會包含四個列表中的匹配的項目。原始元素不包含在同胞元素中，當我們打算找到 DOM 樹的特定層級上的所有元素時，記住一點很重要。