Maison > Article > interface Web > Comment implémenter le parcours d'éléments dans jquery

Comment implémenter le parcours d'éléments dans jquery

青灯夜游original: 2022-05-30 15:00:454380parcourir

Méthodes pour implémenter le parcours d'élément : 1. children(), qui peut renvoyer tous les éléments enfants directs de l'élément sélectionné ; 2. plus proche(), qui peut renvoyer le premier élément ancêtre de l'élément sélectionné 3. each(), qui est Chaque élément correspondant exécute une fonction ; 4. filter(), qui peut filtrer les éléments spécifiés ; 5. nextAll(), etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

jquery fournit une variété de méthodes pour parcourir les éléments

Méthode	Description
add()	Ajouter des éléments à la collection d'éléments correspondants
addBack()	Le précédent l'ensemble d'éléments est ajouté à l'ensemble actuel
children()	Renvoie tous les enfants directs de l'élément sélectionné
closest()	Renvoie le premier élément ancêtre de l'élément sélectionné
content( )	Renvoie tous les éléments enfants directs (y compris les nœuds de texte et de commentaires) de l'élément sélectionné
each()	Exécuter la fonction pour chaque élément correspondant
end()	Terminer la chaîne actuelle Le plus opération de filtrage récente et renvoie l'ensemble des éléments correspondants à l'état précédent
eq()	Renvoie l'élément avec le numéro d'index spécifié de l'élément sélectionné
filter()	Renvoie les éléments correspondants. la collection est réduite à de nouveaux éléments correspondant à la valeur de retour du sélecteur ou de la fonction correspondante
find()	Renvoie les éléments descendants de l'élément sélectionné
first()	Renvoie le premier élément de l'élément sélectionné
has()	Renvoie tous les éléments qui contiennent un ou plusieurs éléments à l'intérieur
is()	Vérifie l'ensemble des éléments correspondants en fonction de l'objet sélecteur/élément/jQuery, s'il y en a au moins un élément correspondant, puis renvoie true
last()	Renvoie le dernier élément de l'élément sélectionné
map()	Passe chaque élément de l'ensemble correspondant actuel à la fonction et génère un nouvel objet jQuery contenant la valeur de retour
next()	Renvoie l'élément frère suivant de l'élément sélectionné
nextAll()	Renvoie tous les éléments frères après l'élément sélectionné
nextUntil()	Retours entre deux Tous les éléments frères après chaque élément entre les paramètres donnés
not()	Supprime l'élément de l'ensemble des éléments correspondants
offsetParent()	Renvoie le premier élément parent positionné
parent( )	Renvoie l'élément parent direct de l'élément sélectionné
parents()	Renvoie tous les éléments ancêtres de l'élément sélectionné
parentsUntil()	Renvoie entre deux éléments ancêtres donnés entre les paramètres
prev()	Renvoie l'élément frère précédent de l'élément sélectionné
prevAll()	Renvoie tous les éléments frères avant l'élément sélectionné
prevUntil ()	Renvoie tous les éléments frères avant chaque élément entre les deux paramètres donnés
siblings()	Renvoie tous les éléments frères et sœurs de l'élément sélectionné
slice()	Réduit l'ensemble des éléments correspondants à un sous-ensemble de la plage spécifiée

Parmi eux, il existe deux méthodes pour parcourir les éléments enfants :

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

Différence :

la méthodechildren() renvoie tous les éléments enfants directs de l'élément sélectionné (éléments enfants directs, uniquement les fils et non les petits-enfants (: c'est-à-dire pas de récursion) À parcourir)

Le La méthode find() obtient les descendants de chaque élément de la collection d'éléments actuelle (notez que la méthode find() doit passer des paramètres, sinon elle sera invalide)

Exemple : interrogez tous les éléments enfants

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