jQuery 遍历同胞(siblings)知识点详解
编程小白也能轻松掌握的DOM同胞元素遍历技巧
什么是同胞元素？
在HTML文档中，同胞元素是指拥有相同父元素的元素。例如，在一个ul列表中，所有的li元素互为同胞元素。
jQuery提供了一系列方法来遍历和操作这些同胞元素，让我们能够方便地选择和修改DOM元素。
简单理解： 就像你有兄弟姐妹一样，在DOM树中，同一个父元素下的所有元素都是同胞关系。
查找所有同胞元素
siblings() 方法返回被选元素的所有同胞元素（不包括自己）。
大白话： 找到和当前元素同一个”父亲”的所有”兄弟姐妹”（不包括自己）。
语法： $(selector).siblings(filter)
参数： filter（可选）- 用于缩小同胞元素搜索范围的选择器
示例：
$(“#item2”).siblings() – 选择id为item2的所有同胞
$(“#item2”).siblings(“.active”) – 选择id为item2且类名为active的同胞
查找下一个同胞元素
next() 方法返回被选元素的下一个同胞元素（紧挨着的下一个）。
大白话： 找到当前元素紧挨着的下一个”弟弟”或”妹妹”。
语法： $(selector).next(filter)
参数： filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item2”).next() – 选择id为item2的下一个元素
$(“#item2”).next(“.special”) – 选择id为item2的下一个且类名为special的元素
查找后面的所有同胞
nextAll() 方法返回被选元素之后的所有同胞元素。
大白话： 找到当前元素后面的所有”弟弟妹妹”。
语法： $(selector).nextAll(filter)
参数： filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item2”).nextAll() – 选择id为item2之后的所有元素
$(“#item2”).nextAll(“.highlight”) – 选择id为item2之后所有类名为highlight的元素
查找直到某个元素前的同胞
nextUntil() 方法返回介于两个给定参数之间的所有同胞元素（不包括边界元素）。
大白话： 找到当前元素到另一个指定元素之间的所有”弟弟妹妹”（不包括那个指定元素）。
语法： $(selector).nextUntil(stop, filter)
参数：
stop – 停止搜索的位置（选择器、元素或jQuery对象）
filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item2”).nextUntil(“#item5”) – 选择id为item2到item5之间的元素（不包括item5）
查找上一个同胞元素
prev() 方法返回被选元素的上一个同胞元素（紧挨着的上一个）。
大白话： 找到当前元素紧挨着的前一个”哥哥”或”姐姐”。
语法： $(selector).prev(filter)
参数： filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item2”).prev() – 选择id为item2的上一个元素
$(“#item2”).prev(“.selected”) – 选择id为item2的上一个且类名为selected的元素
查找前面的所有同胞
prevAll() 方法返回被选元素之前的所有同胞元素。
大白话： 找到当前元素前面的所有”哥哥姐姐”。
语法： $(selector).prevAll(filter)
参数： filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item2”).prevAll() – 选择id为item2之前的所有元素
$(“#item2”).prevAll(“.important”) – 选择id为item2之前所有类名为important的元素
查找直到某个元素前的同胞
prevUntil() 方法返回介于两个给定参数之间的所有同胞元素（不包括边界元素）。
大白话： 找到当前元素到另一个指定元素之间的所有”哥哥姐姐”（不包括那个指定元素）。
语法： $(selector).prevUntil(stop, filter)
参数：
stop – 停止搜索的位置（选择器、元素或jQuery对象）
filter（可选）- 用于缩小搜索范围的选择器
示例：
$(“#item5”).prevUntil(“#item2”) – 选择id为item5到item2之间的元素（不包括item2）
互动演示 – 体验同胞元素遍历
DOM元素结构（所有元素同辈）
点击上面的按钮查看不同方法的遍历结果
当前目标元素已用红色高亮显示
知识点总结与对比
| 方法 | 作用 | 方向 | 包含边界 | 示例 |
|---|---|---|---|---|
| siblings() | 所有同胞元素 | 双向 | 不包含自己 | $(“#target”).siblings() |
| next() | 下一个同胞元素 | 向后 | 不包含自己 | $(“#target”).next() |
| nextAll() | 之后所有同胞元素 | 向后 | 不包含自己 | $(“#target”).nextAll() |
| nextUntil() | 到指定元素前的所有同胞 | 向后 | 不包含边界元素 | $(“#target”).nextUntil(“#item5”) |
| prev() | 上一个同胞元素 | 向前 | 不包含自己 | $(“#target”).prev() |
| prevAll() | 之前所有同胞元素 | 向前 | 不包含自己 | $(“#target”).prevAll() |
| prevUntil() | 到指定元素前的所有同胞 | 向前 | 不包含边界元素 | $(“#target”).prevUntil(“#item2”) |
使用同胞遍历的实用技巧：
- 处理导航菜单（高亮当前菜单项）
- 创建手风琴效果（折叠其他元素）
- 表单验证（查找相邻的错误提示）
- 表格行操作（定位上下行）
- 图片画廊（查找前后图片）