A quoi sert la méthode parents() dans jquery-Questions et réponses frontales-php.cn

A quoi sert la méthode parents() dans jquery

青灯夜游

Libérer： 2022-03-10 17:24:18

original

2330 Les gens l'ont consulté

Dans jquery, la méthode parents() est utilisée pour obtenir les éléments ancêtres de chaque élément dans l'ensemble d'éléments correspondant actuel. La syntaxe est "$(selector).parents(filter)" ; le paramètre "filter" est facultatif et est utilisé pour spécifier une expression de sélecteur de réduction qui recherche une plage d'éléments ancêtres.

A quoi sert la méthode parents() dans jquery

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

Dans jquery, la méthode parents() est utilisée pour obtenir les éléments ancêtres de chaque élément dans l'ensemble actuel d'éléments correspondants.

Les ancêtres sont le père, le grand-père, l'arrière-grand-père, etc.

Arbre DOM : Cette méthode parcourt tous les chemins jusqu'aux ancêtres de l'élément DOM, de l'élément parent à l'élément racine du document ().

Syntaxe

$(selector).parents(filter)

Copier après la connexion

Paramètres	Description
filtre	Facultatif. Spécifie une expression de sélection qui restreint la recherche d'éléments ancêtres. Remarque : Pour renvoyer plusieurs ancêtres, utilisez des virgules pour séparer chaque expression.

Remarque : Si le paramètre de filtre est vide, cette méthode sélectionnera tous les ancêtres de la collection d'éléments à partir de tous les chemins depuis l'élément parent immédiat jusqu'à et . Il est donc utile de transmettre une expression de sélection qui affine les résultats de la recherche.

Exemple 1 : Renvoyer tous les éléments ancêtres de :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

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

<!-- body元素之前的外部红色的边框,是html元素(也是一个祖先节点)。-->
</html>

Copier après la connexion

A quoi sert la méthode parents() dans jquery

Exemple 2 : Affiner la portée de la recherche

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

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

</html>

Copier après la connexion

A quoi sert la méthode parents() dans jquery