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 对象，不会报错。
