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 树的特定层级上的所有元素时，记住一点很重要。