jQuery 遍历 - 同胞(siblings)

jQuery 遍历 - 同胞元素 (Siblings)

在 jQuery 中，同胞（兄弟）遍历用于查找与当前选中元素处于同一层级的其他元素。这些元素拥有相同的父元素。

一、核心方法

1.siblings()- 获取所有同胞元素

返回选中元素的所有兄弟元素（不包含自身）。

// 语法$(selector).siblings();$(selector).siblings("selector");// 可选：过滤特定同胞// 示例$("li").siblings();// 返回当前 li 的所有兄弟 li$("li").siblings(".active");// 返回当前 li 中 class 为 active 的兄弟元素

特点：

• 返回所有同级的兄弟元素。
• 不包含当前元素本身。
• 支持选择器过滤，性能优于获取所有后再.filter()。

2.next()- 获取下一个同胞

仅返回紧邻的下一个兄弟元素。

// 语法$(selector).next();$(selector).next("selector");// 可选：如果下一个元素不匹配选择器，返回空// 示例$("li").next();// 返回下一个 li$("li").next("p");// 如果下一个兄弟是 p 则返回，否则返回空

3.nextAll()- 获取后面所有同胞

返回当前元素之后的所有兄弟元素。

// 语法$(selector).nextAll();$(selector).nextAll("selector");// 可选：过滤特定同胞// 示例$("li").nextAll();// 返回当前 li 之后的所有兄弟$("li").nextAll(".item");// 返回当前 li 之后所有 class 为 item 的兄弟

4.nextUntil()- 获取直到指定元素前的同胞

返回当前元素与指定选择器匹配的元素之间的兄弟元素（不包含指定元素本身）。

// 语法$(selector).nextUntil("selector");$(selector).nextUntil("selector","filter");// 可选：额外过滤// 示例// HTML: <li>1</li> <li>2</li> <li class="stop">3</li> <li>4</li>$("li:first").nextUntil(".stop");// 返回：<li>2</li> (不包含 .stop)

5.prev()/prevAll()/prevUntil()

与上述方法对应，但方向是向上（前一个、前面所有、直到指定元素前）。

$(selector).prev();// 上一个同胞$(selector).prevAll();// 前面所有同胞$(selector).prevUntil("selector");// 直到指定元素前的同胞

二、方法对比表

三、代码示例

场景 1：高亮当前项的兄弟项

<ul><liclass="item">Item 1</li><liclass="item active">Item 2</li><liclass="item">Item 3</li><liclass="item">Item 4</li></ul><script>// 高亮所有 active 项的兄弟项$(".active").siblings().css("background","yellow");// 或者：只高亮下一个兄弟$(".active").next().css("color","red");</script>

场景 2：动态表单验证提示

<divclass="form-group"><inputtype="text"class="username"/><spanclass="error-msg"style="display:none;">用户名已存在</span><button>提交</button></div><script>// 验证失败时，显示输入框后面的错误提示$(".username").on("blur",function(){if($(this).val()==="admin"){// 显示紧邻的下一个 .error-msg 元素$(this).next(".error-msg").show();}});</script>

场景 3：列表项移动（交换位置）

// 将当前 li 与下一个 li 交换位置$("li").click(function(){var$next=$(this).next();if($next.length){$(this).insertAfter($next);}});

场景 4：使用nextUntil批量处理

<divclass="section"><h2>标题</h2><p>段落 1</p><p>段落 2</p><hrclass="divider"><p>段落 3</p></div><script>// 选中 h2 后，隐藏直到 hr 之前的所有 p$("h2").nextUntil(".divider").filter("p").hide();</script>

四、常用技巧

1. 链式调用与end()

$("li.active").nextAll()// 切换到后面所有兄弟.addClass("future").end()// 回到 li.active.prevAll()// 切换到前面所有兄弟.addClass("past");

2. 判断是否存在特定方向的同胞

if($("li").next().length>0){console.log("存在下一个兄弟元素");}if($("li").prev(".active").length>0){console.log("前面有一个 active 的兄弟");}

3. 获取同胞的索引

// 获取当前 li 在所有兄弟中的索引varindex=$("li.active").siblings().length;// 注意：这不对。正确做法：varindex=$("li.active").index();// 或者在兄弟中查找varindexInSiblings=$("li.active").siblings().addBack().index();

更正：直接获取索引用.index()，获取在同胞中的相对位置通常不需要特殊方法，因为.index()默认就是相对于同胞的。

varindex=$("li.active").index();// 返回在父元素所有子元素中的索引

4. 结合filter进行复杂筛选

// 获取所有 active 的兄弟，且这些兄弟必须是 li$("li.active").siblings("li").addClass("highlight");

五、注意事项

1. 不包含自身：所有同胞方法都不包含当前选中的元素。如果需要包含，需使用.addBack()或.andSelf()(旧版)。
2. 同级限制：只查找同一父元素下的兄弟，不会跨越到父元素的兄弟或其他分支。
3. 选择器过滤：next("selector")和nextAll("selector")中的选择器是过滤作用，即只返回匹配选择器的元素，而不是“查找下一个匹配选择器的元素”（虽然效果类似，但逻辑不同）。
   • next("p")：如果下一个元素是p则返回，否则返回空。
   • nextAll("p")：返回后面所有是p的元素。
4. 空结果：如果没有匹配的同胞，返回空的 jQuery 对象，链式调用不会报错。
5. 性能：siblings()会获取所有兄弟再过滤，如果 DOM 很大且只需要下一个，优先用next()。

六、总结图示

父元素 ├── 兄弟 A ├── 兄弟 B (当前选中) ├── 兄弟 C └── 兄弟 D siblings() -> [A, C, D] next() -> [C] nextAll() -> [C, D] prev() -> [A] prevAll() -> [A]

掌握同胞遍历方法，可以灵活处理列表、表单、导航栏等横向结构的 DOM 操作。