JQUERY 兄弟元素

在 jQuery 中，兄弟元素是指与指定元素处于同一层级的其他元素。jQuery 提供了几种方法来选择和操作兄弟元素：

1、 .siblings()

.siblings() 方法用于选择匹配元素集合中每个元素的所有兄弟元素，即和当前元素处于同一层级的其他元素。

使用方法：

$("selector").siblings();

2、.next()和.nextAll()

.next() 方法用于选择匹配元素集合中每个元素的下一个同级元素。

nextAll()：选择当前元素之后的所有兄弟元素。

使用方法

$("selector").next();

3、.prev()和prevAll

.prev() 方法用于选择匹配元素集合中每个元素的上一个同级元素。

.prevAll()：选择当前元素之前的所有兄弟元素。

使用方法：

$("selector").prev();

4、add() 与 .end()

当你使用 .prev()、.next() 或 .siblings() 等方法后，可以使用 .add() 方法将当前元素集合与之前的结果合并。

.end()：结束当前筛选，返回到上一次元素集合。

使用示例：

// 假设我们有以下 HTML 结构：
// <div class="box">Box 1</div>
// <div class="box">Box 2</div>
// <div class="box">Box 3</div>
// 选择 Box 2 的前一个兄弟元素
$('div.box').eq(1).prev(); // 返回 Box 1

// 选择 Box 2 之前的所有兄弟元素
$('div.box').eq(1).prevAll(); // 返回包含 Box 1 的 jQuery 对象

// 选择 Box 2 的下一个兄弟元素
$('div.box').eq(1).next(); // 返回 Box 3

// 选择 Box 2 之后的所有兄弟元素
$('div.box').eq(1).nextAll(); // 返回包含 Box 3 的 jQuery 对象

// 选择 Box 2 的所有兄弟元素
$('div.box').eq(1).siblings(); // 返回包含 Box 1 和 Box 3 的 jQuery 对象

// 使用 .add() 将当前元素和前一个兄弟元素合并
$('div.box').eq(1).add('div.box').eq(1).prev(); // 返回包含 Box 2 和 Box 1 的 jQuery 对象

// 结束当前筛选，返回到上一次元素集合
$('div.box').eq(1).prev().end(); // 返回包含 Box 1 和 Box 2 的 jQuery 对象

使用这些方法，你可以灵活地选择和操作 DOM 中的兄弟元素。