What is the usage of jquery siblings()-Front-end Q&A-php.cn

What is the usage of jquery siblings()

青灯夜游

Release： 2022-04-21 13:53:56

Original

3547 people have browsed it

jquery siblings() is used to obtain all sibling elements of the selected element. It will traverse forward and backward along the sibling elements of the DOM element and return all child elements that share the same parent element (the selected element). Except for elements); the syntax is "element object.siblings(filter)", and its parameters can be omitted to narrow the search scope.

What is the usage of jquery siblings()

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The jquery siblings() method is used to obtain all sibling elements of the selected element.

Sibling elements are elements that share the same parent element.

siblings() method will traverse forward and backward along the sibling elements of the DOM element, returning all child elements that share the same parent element (except the selected element).

Grammar format:

$(selector).siblings(filter)

Copy after login

Parameters	Description
filter	Optional. Specifies a selector expression that narrows the search for sibling elements.

Example 1: Return all sibling elements of each

element with class name "start"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("li.start").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">li (兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>

	</body>
</html>

Copy after login

What is the usage of jquery siblings()

Example 2: Narrow the search (use two parameters to filter the search for sibling elements)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("li.start").siblings(".1").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul(父节点)  
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="1">li(类名为"star"的上一个兄弟节点)</li>
				<li class="start">li (兄弟节点)</li>
				<li>li(类名为"star"的下一个兄弟节点)</li>
				<li class="1">li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们缩小搜索结果只返回在类名为“star”和“stop”的li元素之间类名为“1”的兄弟元素。</p>

	</body>
</html>

Copy after login

What is the usage of jquery siblings()

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What is the usage of jquery siblings(). For more information, please follow other related articles on the PHP Chinese website!