Maison > Article > interface Web > Comment interroger l'élément précédent avec jquery

Comment interroger l'élément précédent avec jquery

青灯夜游original: 2022-03-16 15:51:175994parcourir

Dans jquery, vous pouvez utiliser la méthode prev() pour interroger l'élément précédent d'un élément spécifié. Cette méthode peut renvoyer l'élément frère précédent de l'élément sélectionné. La syntaxe est "$(selector).prev(filter)". ; "filter " est un paramètre facultatif. S'il est défini, il peut restreindre la portée de la recherche de l'élément frère précédent.

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

Dans jquery, vous pouvez utiliser la méthode prev() pour interroger l'élément précédent d'un élément spécifié. La méthode

prev() renvoie l'élément frère précédent de l'élément sélectionné.

Les éléments frères et sœurs sont des éléments qui partagent le même élément parent.

Remarque : Cette méthode ne renvoie qu'un seul élément.

Syntaxe :

$(selector).prev(filter)

Filtre de paramètres : facultatif, spécifie une expression de sélecteur qui restreint la portée de la recherche de l'élément frère précédent.

Exemple 1 : renvoie l'élément frère précédent de chaque élément

avec le nom de classe "start":

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>
		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
	</body>
</html>

Comment interroger lélément précédent avec jquery

Exemple 2 : sélectionnez le frère précédent de chaque élément

element
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { $("div").prev().css("background-color", "yellow"); }); </script> </head> <body> <p>这是一个P元素。</p> <h2>这是一个标题，并且是div元素的上一个兄弟元素</h2> <div style="border:1px solid black;padding:10px;">这是一个div元素。</div> <p>这是另一个P元素。</p> <p>这是一个P元素，并且是div元素的上一个兄弟元素。</p> <div style="border:1px solid black;padding:10px;"> <p>这是div里面的一个P元素。</p> </div> </body> </html>

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo de développement web front-end】

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：Déterminer s'il faut utiliser quel opérateur pour un objet jqueryArticle suivant：Déterminer s'il faut utiliser quel opérateur pour un objet jquery

Articles Liés

Voir plus