How to implement element traversal in jquery-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to implement element traversal in jquery

青灯夜游

May 30, 2022 pm 03:00 PM

jquery

Methods to implement element traversal: 1. children(), which can return all direct child elements of the selected element; 2. closest(), which can return the first ancestor element of the selected element; 3. each (), execute the function for each matching element; 4. filter(), which can filter the specified element; 5. nextAll(), etc.

How to implement element traversal in jquery

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

jquery provides a variety of methods for traversing elements

##MethodDescriptionadd()Add elements to the set of matching elementsaddBack()Add the previous set of elements Add to the current collectionchildren()Returns all direct child elements of the selected elementclosest() Returns the first ancestor element of the selected elementcontents()Returns all direct child elements of the selected element (including text and Comment node) each()Execute the function for each matching elementend()End the most recent filtering operation in the current chain, and return the set of matching elements to the previous state eq() Returns the selected elements The element with the specified index numberfilter()Reduce the set of matching elements to new elements that match the selector or the return value of the matching functionfind()Returns the descendant elements of the selected elementfirst()Returns the first element of the selected element elementshas()Returns all elements that have one or more elements inside themis( )Checks the set of matching elements based on the selector/element/jQuery object and returns true if there is at least one matching elementlast()Return the last element of the selected elementmap() Pass each element in the current matching set to the function and generate a new jQuery containing the return value Objectnext()Returns the next sibling element of the selected elementnextAll()Returns all sibling elements after the selected elementnextUntil()Returns the sibling elements after each element between the two given parameters All sibling elementsnot()Remove elements from the set of matching elementsoffsetParent()Returns the first positioned parent elementparent()Returns the direct parent element of the selected elementparents()Returns all ancestor elements of the selected elementparentsUntil()Returns between the two given parameters All ancestor elements between prev()Returns the previous sibling element of the selected elementprevAll( )Returns all sibling elements before the selected elementprevUntil()Returns every element between the two given parameters All sibling elements before the selected elementsiblings()Returns all sibling elements of the selected element slice()Reduce the set of matching elements to a subset of the specified range

There are two methods for traversing child elements:

children() method: Get the direct subset elements under the element
find() method: Get all (including subsets of subsets) subset elements under this element

Difference:

The children() method returns all direct child elements of the selected element (direct child elements, only look for sons and not grandchildren (: that is to say, it will not traverse recursively)

find( ) method to obtain the descendants of each element in the current element collection (note that the find() method must pass parameters, otherwise it will be invalid)

Example: Query all child elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").find("*").css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>选取ul的所有子元素</button>
	</body>

</html>

How to implement element traversal in jquery

There are 7 methods to traverse sibling elements:

siblings() method, which is mainly used to obtain all elements at the same level of a specified element
next() method, mainly used to obtain the next sibling element of the specified element
nextAll() method, mainly used to obtain the specified element All elements of the next sibling of the element
nextUntil() method is mainly used to obtain the next sibling element of the specified element. This sibling element must be the same as the specified element and nextUntil( ) method to set elements between elements
prev() method, mainly used to obtain the upper level sibling elements of the specified element
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 an element between the specified element and the element set by the prevUntil() method

siblings() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").css("background", "yellow");
		</script>

	</body>
</html>

How to implement element traversal in jquery

next() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" ></script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

How to implement element traversal in jquery

nextAll() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" ></script>
	</head>

	<body>

		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

How to implement element traversal in jquery

nextUntil() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" ></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

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

	</body>
</html>

How to implement element traversal in jquery

prev() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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>

How to implement element traversal in jquery

prevAll() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" 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>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

How to implement element traversal in jquery

prevUntil() method

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" ></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>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

How to implement element traversal in jquery

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

The above is the detailed content of How to implement element traversal in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn