Comment interroger l'élément précédent avec jquery-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-06-07 17:38:13

original

6034 Les gens l'ont consulté

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.

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

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)

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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