How to query all child elements with jquery-Front-end Q&A-php.cn

How to query all child elements with jquery

青灯夜游

Release： 2022-09-27 17:46:42

Original

9938 people have browsed it

In jquery, you can use the find() method to query all child elements. This method can obtain all subset elements under the specified element, including subsets of subsets; this method requires passing in a parameter. To filter the results, you only need to set the parameter to "*" to find all sub-elements, the syntax is "$(specified element).find("*")".

How to query all child elements with jquery

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

In jquery, there are two ways to find child elements:

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

Among them, you want to query all sub-elements , you can only use the find() method.

The find() method returns the 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)

Copy after login

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.

Description: The filter parameter is used to filter the search results. You only need to set the parameter to "*" to find all sub-elements.

Example: Query all child elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.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>

Copy after login

How to query all child elements with jquery

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

The above is the detailed content of How to query all child elements with jquery. For more information, please follow other related articles on the PHP Chinese website!