jquery同级元素

jQuery 同级元素操作方法

在 jQuery 中，可以通过多种方法选择或操作同级元素（即 DOM 树中同一层级的元素）。以下是常用的方法：

获取所有同级元素

使用 siblings() 方法可以选中当前元素的所有同级元素：

$("#target").siblings();

如果需要筛选特定类型的同级元素，可以传入选择器：

$("#target").siblings(".class-name");

获取相邻的下一个同级元素

next() 方法选中紧邻的下一个同级元素：

$("#target").next();

nextAll() 方法选中之后的所有同级元素：

$("#target").nextAll();

获取相邻的上一个同级元素

prev() 方法选中紧邻的上一个同级元素：

$("#target").prev();

prevAll() 方法选中之前的所有同级元素：

$("#target").prevAll();

获取所有同级元素（不包括自身）

nextUntil() 和 prevUntil() 方法可以选中介于两个元素之间的同级元素：

$("#start").nextUntil("#end");
$("#end").prevUntil("#start");

示例代码

以下是一个完整的示例，展示如何操作同级元素：

// HTML 结构假设如下：
// <div class="parent">
//   <div id="first">First</div>
//   <div id="target">Target</div>
//   <div id="next">Next</div>
//   <div id="last">Last</div>
// </div>

// 选中所有同级元素并添加样式
$("#target").siblings().css("color", "red");

// 选中下一个同级元素
$("#target").next().text("Next sibling modified");

// 选中上一个同级元素
$("#target").prev().addClass("highlight");

注意事项

• 同级元素操作基于 DOM 结构，确保选择器能正确匹配目标元素。
• 方法链式调用时需注意顺序，例如 next().prev() 可能不会返回预期结果。
• 可通过组合使用 filter() 进一步筛选同级元素。