jQuery 同胞

"同胞（Siblings）"指拥有同一个父级的元素，即兄弟节点。jQuery 的 siblings()、next()、prev() 等方法负责在同胞之间水平遍历。

演示用的兄弟结构：

<ul>
    <li id="li1">第一个</li>
    <li id="li2">第二个</li>
    <li id="li3">第三个</li>
    <li id="li4">第四个</li>
</ul>

siblings()：所有同胞

siblings() 返回除自己以外的全部兄弟元素：

$("#li2").siblings().each(function () {
    console.log($(this).attr("id"));
});
// 输出：li1、li3、li4（不含 li2 自己）

也可传选择器过滤，只挑特定同胞：

console.log($("#li2").siblings("#li4").length); // 输出：1

next() 与 prev()：紧邻的单个同胞

• next()：返回紧跟在后面的下一个兄弟
• prev()：返回紧挨在前面的上一个兄弟

console.log($("#li2").next().attr("id"));  // 输出：li3
console.log($("#li2").prev().attr("id"));  // 输出：li1

效果：每次都只移动一步，像指针在链表上走。

nextAll() 与 prevAll()：一侧的全部同胞

• nextAll()：后面所有兄弟
• prevAll()：前面所有兄弟

$("#li2").nextAll().css("color", "red");  // 效果：li3、li4 变红
$("#li2").prevAll().css("color", "blue"); // 效果：li1 变蓝

适合"从某项起向后全部操作"的场景。

nextUntil() 与 prevUntil()：到指定同胞为止

nextUntil(选择器) 收集后面兄弟，遇到匹配的元素就停止（不含它）：

// 把 li2 之后、li4 之前的兄弟挑出来
$("#li2").nextUntil("#li4").each(function () {
    console.log($(this).attr("id"));
});
// 输出：li3（遇到 li4 停止，li4 本身不包含）

$("#li2").prevUntil("#li1"); // 效果：同理，返回空（li2 前面只有 li1，遇到即停）

同胞方法速查表

方法	方向	数量
siblings()	双向	除自己外全部
next() / prev()	后 / 前	各 1 个
nextAll() / prevAll()	后 / 前	一侧全部
nextUntil() / prevUntil()	后 / 前	到边界为止

综合示例：Tab 切换高亮

<button class="tab">页签1</button>
<button class="tab">页签2</button>
<button class="tab">页签3</button>

$(".tab").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
});
// 效果：点击的页签高亮，同时清除其他页签的高亮

小结

同胞遍历围绕"兄弟"做水平移动：siblings() 拿全部兄弟、next/prev 走一步、All 版本到一侧尽头、Until 版本设边界。会"先加后清"就能轻松实现 Tab 等经典交互。