jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在jQuery中，我们可以使用多种方法来获取兄弟节点，本文将详细介绍如何使用jQuery获取兄弟节点。
1、使用.prev()和.next()方法获取相邻兄弟节点
.prev()方法用于获取当前元素之前的元素，即它的前一个兄弟节点。.next()方法用于获取当前元素之后的元素，即它的后一个兄弟节点，这两个方法都返回一个包含匹配元素的集合。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery获取兄弟节点</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<button id="prevBtn">Previous Sibling</button>
<button id="nextBtn">Next Sibling</button>
<script>
$(document).ready(function(){
$("#prevBtn").click(function(){
var prevSibling = $(".box").first().prev();
alert("Previous sibling: " + prevSibling.text());
});
$("#nextBtn").click(function(){
var nextSibling = $(".box").last().next();
alert("Next sibling: " + nextSibling.text());
});
});
</script>
</body>
</html>
在这个示例中，我们有三个带有类名box的div元素，当点击“Previous Sibling”按钮时，会弹出当前第一个div元素的前一个兄弟节点的文本内容；当点击“Next Sibling”按钮时，会弹出当前最后一个div元素的后一个兄弟节点的文本内容。
2、使用.siblings()方法获取所有兄弟节点
.siblings()方法用于获取当前元素的所有兄弟节点，包括它自己，这个方法返回一个包含匹配元素的集合，如果需要排除当前元素本身，可以使用.siblings().not(this)。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery获取兄弟节点</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<button id="allSiblingsBtn">All Siblings</button>
<script>
$(document).ready(function(){
$("#allSiblingsBtn").click(function(){
var allSiblings = $(".box").siblings();
alert("All siblings: " + allSiblings.length);
});
});
</script>
</body>
</html>
在这个示例中，我们有三个带有类名box的div元素，当点击“All Siblings”按钮时，会弹出当前所有兄弟节点的数量，注意，这里也包括了第一个和最后一个div元素之间的空白文本节点，如果需要排除空白文本节点，可以使用$.trim($(".box").siblings().get(0).outerHTML) === "" && $.trim($(".box").siblings().get(-1).outerHTML) === ""来判断。