jquery同级元素选择器
jQuery 同级元素选择器
jQuery 提供了多种方法来选择同级元素，这些方法可以基于 DOM 结构快速定位目标元素。以下是常用的同级元素选择器及其用法：
siblings() 方法
siblings() 方法选择当前元素的所有同级元素（不包括自己）。可以通过参数进一步筛选目标元素。
// 选择所有同级元素
$("#target").siblings();
// 选择同级的 <p> 元素
$("#target").siblings("p");next() 方法
next() 方法选择当前元素的下一个同级元素（紧邻的后一个元素）。
// 选择下一个同级元素
$("#target").next();
// 选择下一个同级的 <div> 元素
$("#target").next("div");nextAll() 方法
nextAll() 方法选择当前元素之后的所有同级元素。
// 选择之后的所有同级元素
$("#target").nextAll();
// 选择之后的所有同级 <span> 元素
$("#target").nextAll("span");prev() 方法
prev() 方法选择当前元素的上一个同级元素（紧邻的前一个元素）。
// 选择上一个同级元素
$("#target").prev();
// 选择上一个同级的 <li> 元素
$("#target").prev("li");prevAll() 方法
prevAll() 方法选择当前元素之前的所有同级元素。
// 选择之前的所有同级元素
$("#target").prevAll();
// 选择之前的所有同级 <a> 元素
$("#target").prevAll("a");nextUntil() 和 prevUntil() 方法
nextUntil() 和 prevUntil() 方法分别选择当前元素之后或之前的同级元素，直到遇到指定的选择器匹配的元素为止。
// 选择之后的所有同级元素，直到遇到 .stop 元素
$("#target").nextUntil(".stop");
// 选择之前的所有同级 <div> 元素，直到遇到 #end 元素
$("#target").prevUntil("#end", "div");示例
以下是一个完整的示例，展示如何使用这些方法：
<ul>
<li>Item 1</li>
<li id="target">Item 2 (Target)</li>
<li>Item 3</li>
<li class="stop">Item 4 (Stop)</li>
<li>Item 5</li>
</ul>
<script>
// 选择所有同级 <li> 元素
$("#target").siblings("li").css("color", "red");
// 选择下一个同级元素
$("#target").next().css("font-weight", "bold");
// 选择之前的所有同级元素
$("#target").prevAll().css("background", "yellow");
// 选择之后的所有同级元素，直到遇到 .stop
$("#target").nextUntil(".stop").css("text-decoration", "underline");
</script>通过这些方法，可以灵活地选择和操作 DOM 中的同级元素。
