jquery 兄弟元素

### 使用 jQuery 选择和操作兄弟元素

#### 通过 `siblings()` 方法选择所有兄弟元素
当需要选取特定元素的所有同级兄弟节点时，可以利用 `siblings()` 函数。此函数会返回给定元素周围处于相同层次结构位置上的其它 DOM 节点组成的集合[^1]。

$(document).ready(function(){
    var siblings = $("#myElement").siblings();
});

上述代码片段展示了如何捕获 ID 为 `myElement` 的 HTML 组件周围的全部兄弟组件，并将其存储于变量 `siblings` 中以便后续处理[^2]。

#### 对选中的兄弟元素执行遍历与修改
一旦获得了目标元素的兄弟列表之后，就可以借助 `.each()` 循环迭代每一个成员并对它们实施各种形式的操作，比如改变样式属性或是读取内部文本数据等：

siblings.each(function(){
    console.log($(this).text());
});

这段脚本实现了对之前收集到的兄弟元素逐一访问并将各自的纯文本内容打印至浏览器控制台的功能。

#### 修改兄弟元素外观样式的实例
为了实现点击表格行时突出显示当前行的同时恢复其余各行默认状态的效果，可采用如下所示的方式定义事件处理器逻辑：

$("tbody tr").click(function () {
    $(this).siblings().css("background", "revert");
    $(this).css("background", "#f1ff37");
});

这里先是调用了 `siblings()` 来定位被触发对象以外的所有同胞 `<tr>` 标签，接着分别设置了不同的背景颜色以达到视觉区分的目的[^4]。