jQuery siblings() 方法表示获取同级的所有兄弟姐妹节点,但不包括自己,它也是开发中的常用方法之一。
语法
$(selector).siblings(filter)
filter: 这是一个选择器表达式,用于缩小对兄弟元素的搜索范围。它可以有多个值。值应以逗号分隔。如果有一个段落p元素有多个兄弟节点,我们要找到该段落的h2和span兄弟节点,那么可以用如下表达式。
$("p").siblings("h2, span")
上面的语法返回h2和span元素。例子
介绍一些例子了解jQuery siblings() 方法的使用。
<html>
<head>
<style>
div{
border: 2px solid black;
}
.d1 *{
display: block;
border: 2px solid black;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("span").siblings().css({ "color": "red", "border": "2px dashed blue"});
});
});
</script>
</head>
<body>
<h4> 这是一个使用 jQuery siblings() 方法的例子。 </h4>
<div class = "d1">
这是父 div 元素
<p> 这是第一段 </p>
<p> 这是第二段 </p>
<span> 这是 span </span>
<h4> 这是标题 h4 </h4>
<h2> 这是标题 h2 </h2>
</div>
<p> 单击以下按钮获取兄弟姐妹节点。 </p>
<button> 点击看看 </button>
</body>
</html>
效果如下: