How to get the first few sibling elements in jquery-Front-end Q&A-php.cn

How to get the first few sibling elements in jquery

青灯夜游

Release： 2022-05-17 17:48:03

Original

2711 people have browsed it

3 methods: 1. Use prev() to get the previous sibling element, the syntax is "element.prev()"; 2. Use prevAll() to get all the previous sibling elements, the syntax is "Element.prevAll()"; 3. Use prevUntil(), the syntax is "Element.prevUntil(stop)".

How to get the first few sibling elements in jquery

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

3 ways to get the first few sibling elements in jquery

prev() method, mainly used to get the previous element of the specified element Level sibling elements
prevAll() method, mainly used to obtain all sibling elements at the previous level of the specified element
prevUntil() Method, mainly used to obtain the previous sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the prevUntil() method.

This method returns the value of the two given parameters. All sibling elements before each element between

1. Use the prev() method

prev() method to return The previous sibling element of the selected element.

Note: This method only returns one element.

Syntax:

$(selector).prev(filter)

Copy after login

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

##Example: Return the previous sibling element of the

element with the class name "start"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
		.siblings *{ 
			display: block;
			border: 2px solid lightgrey;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
		</style>
		<script>
		$(document).ready(function(){
			$("li.start").prev().css({"color":"red","border":"2px solid red"});
		});
		</script>
		</head>
		<body>
		
		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)  
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>   
		</div>
		
		</body>
		</html>

Copy after login

How to get the first few sibling elements in jquery

2. Use the prevAll() method

The prevAll() method returns all sibling elements before the selected element.

Syntax:

$(selector).prevAll(filter)

Copy after login

ParametersDescriptionoptional. Specifies a selector expression that narrows the scope of the search element's previous sibling elements.


filter	Note: If you need to return multiple sibling elements, please use commas to separate each expression.

Example: Return all sibling elements before the

element with class name "start":

<!DOCTYPE html>
<html>

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

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

Copy after login

How to get the first few sibling elements in jquery

3. Use the prevUntil() method

The prevUntil() method returns all sibling elements before each element between selector and stop.

$(selector).prevUntil(stop,filter)

Copy after login

ParameterDescriptionYes select. A selector expression, element, jQuery object that represents where to stop searching for matching sibling elements before the element. Optional. Specifies a selector expression that narrows the search for sibling elements between


stop
filter	selector and stop. Note: If you need to return multiple sibling elements, please use commas to separate each expression.

Example: Return all sibling elements between two

elements with class names "start" and "stop"

<!DOCTYPE html>
<html>

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

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

Copy after login

How to get the first few sibling elements in jquery

【Recommended learning:

jQuery video tutorial, web front-end video】

The above is the detailed content of How to get the first few sibling elements in jquery. For more information, please follow other related articles on the PHP Chinese website!