jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在jQuery中，我们可以使用多种方法来获取兄弟元素，本文将详细介绍如何使用jQuery获取兄弟元素。
1、使用.prev()和.next()方法获取兄弟元素
.prev()方法用于获取当前元素的前一个同级元素，而.next()方法用于获取当前元素的后一个同级元素，这两个方法都返回一个包含零个或多个DOM元素的jQuery对象。
示例代码：
<!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 currentBox = $(".box:first");
var previousBox = currentBox.prev();
alert("Previous sibling: " + previousBox.text());
});
$("#nextBtn").click(function() {
var currentBox = $(".box:first");
var nextBox = currentBox.next();
alert("Next sibling: " + nextBox.text());
});
});
</script>
</body>
</html>
2、使用.siblings()方法获取兄弟元素
.siblings()方法用于获取匹配选择器的所有同级元素，包括文本节点，该方法返回一个包含零个或多个DOM元素的jQuery对象。
示例代码：
<!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 Siblings</button>
<button id="nextBtn">Next Siblings</button>
<script>
$(document).ready(function() {
$("#prevBtn").click(function() {
var currentBox = $(".box:first");
var previousSiblings = currentBox.siblings(".box");
alert("Previous siblings: " + previousSiblings.length);
});
$("#nextBtn").click(function() {
var currentBox = $(".box:first");
var nextSiblings = currentBox.siblings(".box");
alert("Next siblings: " + nextSiblings.length);
});
});
</script>
</body>
</html>
3、使用.eq()方法获取特定位置的兄弟元素
.eq()方法用于获取匹配选择器的元素集合中指定位置的元素，该方法返回一个包含零个或一个DOM元素的jQuery对象，注意，索引从0开始。
示例代码：
<!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="secondBtn">Second Sibling</button>
<script>
$(document).ready(function() {
$("#secondBtn").click(function() {
var currentBox = $(".box:first");
var secondBox = currentBox.eq(1); // 索引为1，表示第二个兄弟元素（不包括第一个）
alert("Second sibling: " + secondBox.text());
});
});
</script>
</body>
</html>