Maison > Article > interface Web > Comment obtenir les premiers éléments frères et sœurs dans jquery

Comment obtenir les premiers éléments frères et sœurs dans jquery

青灯夜游original: 2022-05-17 17:48:032658parcourir

3 méthodes : 1. Utilisez prev() pour obtenir l'élément frère précédent, la syntaxe est "element.prev()" ; 2. Utilisez prevAll() pour obtenir tous les éléments frères précédents, la syntaxe est "element.prevAll" ; ()"; 3. Utilisez prevUntil(), la syntaxe est "element.prevUntil(stop)".

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

3 façons pour jquery d'obtenir les premiers éléments frères et sœurs

Méthode prev(), principalement utilisée pour obtenir les éléments frères et sœurs de niveau supérieur de l'élément spécifié
Méthode prevAll(), principalement utilisée pour obtenir tout les éléments frères au niveau précédent de l'élément spécifié. La méthode prevUntil() est principalement utilisée pour obtenir l'élément frère de l'élément spécifié. Cet élément frère doit être entre l'élément spécifié et l'élément défini par la méthode prevUntil(). Les éléments entre
1 Utilisez la méthode prev()

prev() pour renvoyer l'élément sélectionné L'élément frère précédent. . Remarque : Cette méthode ne renvoie qu'un seul élément.

Syntaxe :

$(selector).prev(filter)

ParamètresDescriptionfilterExemple : renvoie l'élément frère précédent de l'élément

avec le nom de classe "start"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
		.siblings *{ 
			display: block;
			border: 2px solid lightgrey;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
		</style>
		<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>


Facultatif. Spécifie une expression de sélection qui restreint la recherche de l'élément frère précédent.

2. Utilisez la méthode prevAll() Comment obtenir les premiers éléments frères et sœurs dans jquery

prevAll() pour renvoyer. l'élément étant Tous les éléments frères avant l'élément sélectionné. Syntaxe :

$(selector).prevAll(filter)

ParamètresDescriptionfiltreRemarque : Exemple : renvoie tous les éléments frères avant l'élément

avec le nom de classe "start":

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>


Facultatif. Spécifie une expression de sélecteur qui restreint la portée des éléments frères précédents de l’élément de recherche.	Si vous devez renvoyer plusieurs éléments frères, veuillez utiliser des virgules pour séparer chaque expression.

3. Utilisez la méthode prevUntil() Comment obtenir les premiers éléments frères et sœurs dans jquery

prevUntil() pour renvoyer. Tous les éléments frères précédant chaque élément entre le sélecteur et l'arrêt.

$(selector).prevUntil(stop,filter)

ParamètresDescriptionstopfiltrestopExemple : renvoie tous les éléments frères entre deux éléments

avec les noms de classe "start" et "stop"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>


Facultatif. Une expression de sélecteur, un élément, un objet jQuery qui représente où arrêter la recherche des éléments frères correspondants avant l'élément.
facultatif. Spécifie une expression de sélecteur qui restreint la recherche d'éléments frères entre selector et	. Remarque : Si vous devez renvoyer plusieurs éléments frères, veuillez utiliser des virgules pour séparer chaque expression.

[Apprentissage recommandé :

Tutoriel vidéo jQuery Comment obtenir les premiers éléments frères et sœurs dans jquery ,

Vidéo 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：Que signifie lier dans jqueryArticle suivant：Que signifie lier dans jquery

Articles Liés

Voir plus