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: li1/li li2/li li classstop3/li li4/li$(li:first).nextUntil(.stop);// 返回li2/li (不包含 .stop)5.prev()/prevAll()/prevUntil()与上述方法对应但方向是向上前一个、前面所有、直到指定元素前。$(selector).prev();// 上一个同胞$(selector).prevAll();// 前面所有同胞$(selector).prevUntil(selector);// 直到指定元素前的同胞二、方法对比表方法方向范围是否包含自身是否支持选择器siblings()双向所有兄弟否是next()向下仅下一个否是nextAll()向下之后所有否是nextUntil()向下直到指定元素否是 (2个参数)prev()向上仅上一个否是prevAll()向上之前所有否是prevUntil()向上直到指定元素否是 (2个参数)三、代码示例场景 1高亮当前项的兄弟项ulliclassitemItem 1/liliclassitem activeItem 2/liliclassitemItem 3/liliclassitemItem 4/li/ulscript// 高亮所有 active 项的兄弟项$(.active).siblings().css(background,yellow);// 或者只高亮下一个兄弟$(.active).next().css(color,red);/script场景 2动态表单验证提示divclassform-groupinputtypetextclassusername/spanclasserror-msgstyledisplay:none;用户名已存在/spanbutton提交/button/divscript// 验证失败时显示输入框后面的错误提示$(.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批量处理divclasssectionh2标题/h2p段落 1/pp段落 2/phrclassdividerp段落 3/p/divscript// 选中 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().length0){console.log(存在下一个兄弟元素);}if($(li).prev(.active).length0){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);五、注意事项不包含自身所有同胞方法都不包含当前选中的元素。如果需要包含需使用.addBack()或.andSelf()(旧版)。同级限制只查找同一父元素下的兄弟不会跨越到父元素的兄弟或其他分支。选择器过滤next(selector)和nextAll(selector)中的选择器是过滤作用即只返回匹配选择器的元素而不是“查找下一个匹配选择器的元素”虽然效果类似但逻辑不同。next(p)如果下一个元素是p则返回否则返回空。nextAll(p)返回后面所有是p的元素。空结果如果没有匹配的同胞返回空的 jQuery 对象链式调用不会报错。性能siblings()会获取所有兄弟再过滤如果 DOM 很大且只需要下一个优先用next()。六、总结图示父元素 ├── 兄弟 A ├── 兄弟 B (当前选中) ├── 兄弟 C └── 兄弟 D siblings() - [A, C, D] next() - [C] nextAll() - [C, D] prev() - [A] prevAll() - [A]掌握同胞遍历方法可以灵活处理列表、表单、导航栏等横向结构的 DOM 操作。