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) === ""
来判断。