jquery 同级

jQuery 同级元素操作方法

在 jQuery 中，可以通过多种方式选择或操作同级元素（即具有相同父元素的元素）。以下是常见的操作方法：

1. siblings() 方法 用于选择当前元素的所有同级元素。可以通过参数进一步筛选特定元素。

$("selector").siblings(); // 选择所有同级元素
$("selector").siblings(".class"); // 选择同级中具有特定class的元素

2. next() 和 prev() 方法 next() 选择紧邻的下一个同级元素，prev() 选择紧邻的上一个同级元素。

$("selector").next(); // 下一个同级元素
$("selector").prev(); // 上一个同级元素

3. nextAll() 和 prevAll() 方法 nextAll() 选择当前元素之后的所有同级元素，prevAll() 选择当前元素之前的所有同级元素。

$("selector").nextAll(); // 之后所有同级元素
$("selector").prevAll(); // 之前所有同级元素

4. nextUntil() 和 prevUntil() 方法 nextUntil() 选择当前元素之后直到匹配指定选择器的元素之间的所有同级元素，prevUntil() 类似。

$("selector").nextUntil(".stop"); // 直到遇到class为stop的同级元素
$("selector").prevUntil(".stop"); 

示例代码

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

// HTML结构示例
<ul>
  <li>Item 1</li>
  <li class="target">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

// jQuery操作
$(".target").siblings().css("color", "red"); // 将所有同级li文字颜色设为红色
$(".target").next().css("font-weight", "bold"); // 下一个同级元素加粗
$(".target").prev().css("text-decoration", "underline"); // 上一个同级元素加下划线

注意事项

• 同级操作是基于 DOM 结构的，确保选择器能正确匹配目标元素。
• 链式调用可以组合多个同级操作方法，例如 $("selector").next().prevAll().hide()。
• 如果同级元素不存在，方法会返回空 jQuery 对象，不会报错。