Maison >interface Web >Questions et réponses frontales >Comment interroger tous les éléments enfants avec jquery

Comment interroger tous les éléments enfants avec jquery

青灯夜游original: 2022-04-15 12:11:249935parcourir

Dans jquery, vous pouvez utiliser la méthode find() pour interroger tous les éléments enfants. Cette méthode peut obtenir tous les éléments de sous-ensemble sous l'élément spécifié, y compris les sous-ensembles de sous-ensembles, cette méthode nécessite de transmettre un paramètre pour filtrer les résultats, uniquement vous ; devez définir le paramètre sur "*" pour rechercher tous les sous-éléments, la syntaxe est "$(specified element).find("*")".

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3.

Dans jquery, il existe deux façons de trouver des éléments enfants :

Méthode children() : récupère les éléments du sous-ensemble direct sous cet élément
Méthode find() : récupère tous les éléments du sous-ensemble (y compris les sous-ensembles de sous-ensembles)

Parmi eux, si vous souhaitez interroger tous les éléments enfants, vous ne pouvez utiliser que la méthode find(). La méthode

find() renvoie les éléments descendants de l'élément sélectionné. (Les descendants sont les descendants, les petits-enfants, les arrière-petits-enfants, etc.)
Arbre DOM : Cette méthode parcourt tous les chemins jusqu'aux descendants de l'élément DOM jusqu'au dernier descendant ().

Syntaxe :

$(selector).find(filter)

Paramètres	Description
filter	Obligatoire. Une expression de sélecteur, un élément ou un objet jQuery qui filtre les descendants de recherche. Remarque : Pour renvoyer plusieurs descendants, utilisez des virgules pour séparer chaque expression.

Explication : Le paramètre filter est utilisé pour filtrer les résultats de la recherche. Il vous suffit de définir le paramètre sur "*" pour trouver tous les sous-éléments.

Exemple : interrogez tous les éléments enfants

<!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>

Comment interroger tous les éléments enfants avec jquery

[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo Web frontale]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la méthode fadeout dans jqueryArticle suivant：Comment utiliser la méthode fadeout dans jquery

Articles Liés

Voir plus