Comment interroger tous les éléments enfants avec jquery

青灯夜游
Libérer: 2022-09-27 17:46:42
original
9894 Les gens l'ont consulté

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("*")".

Comment interroger tous les éléments enfants avec jquery

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)
Copier après la connexion
Paramètres Description
filterObligatoire. 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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal