Home > Article > Web Front-end > How to query all descendant nodes with jquery

How to query all descendant nodes with jquery

青灯夜游Original: 2022-09-09 19:46:172132browse

In jquery, you can use the find() method to query all descendant nodes. The find() method can return all descendant elements under the specified element (including children, grandchildren, great-grandchildren, and so on), the syntax is "$(selector).find(filter)"; the parameter "filter" is used to filter the search descendants and narrow down The range of return values. If you want to return all descendant nodes, you need to set the filter value to "*".

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

The find() method returns all descendant elements of the selected element. (Descendants are children, grandchildren, great-grandchildren, and so on.)

DOM tree: This method traverses all paths down the DOM element's descendants to the last descendant (< ;html>).

Syntax:

$(selector).find(filter)

Parameters	Description
filter	Required. A selector expression, element, or jQuery object that filters search descendants. Note: To return multiple descendants, use commas to separate each expression.

Note: The filter parameter is required in the find() method, which can reduce the scope of the return value; if you need to return all descendant elements, the filter is set to " *" Selector.

Example: Use the "*" selector to return all descendant elements of .

<!DOCTYPE html>
<html>

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

	<body class="ancestors">body (曾祖先节点)
		<div style="width:500px;">div (祖先节点)
			<ul>ul (直接父节点)  
				<li>li (子节点)
					<span>span (孙节点)<span>span (曾孙节点)<span>span (曾曾孙节点)</span></span></span>
				</li>
				<li>li (子节点)
					<span>span (孙节点)</span>
				</li>
			</ul>   
		</div>
	</body>

</html>

How to query all descendant nodes with jquery

Example: Return all elements in

descendants

$(document).ready(function(){
	$("ul").find("span").css({"color":"red","border":"2px solid red"});
});

How to query all descendant nodes with jquery

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

The above is the detailed content of How to query all descendant nodes with 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

Previous article：How to add a class name to an element in jqueryNext article：How to add a class name to an element in jquery

See more

How to query all descendant nodes with jquery

Related articles