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>
效果如下:

jQuery siblings() 方法