Comment obtenir les premiers éléments frères et sœurs dans jquery-Questions et réponses frontales-php.cn

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)".

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

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)

Copier après la connexion

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>

Copier après la connexion


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)

Copier après la connexion

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>

Copier après la connexion


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)

Copier après la connexion

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>

Copier après la connexion

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

Étiquettes associées：

jquery

Article précédent：Que signifie lier dans jquery Article suivant：Comment supprimer le style de bordure dans jquery

Déclaration de ce site Web

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

Derniers articles par auteur

Comprendre la sentinelle dans Redis en profondeur

2023-04-26 17:59:18
[Organisation et partage] 7 outils de gestion d'état React populaires

2023-04-26 17:47:48
Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3

2023-04-26 17:41:42
Un article pour parler du contrôle de la mémoire dans Node

2023-04-26 17:37:05
Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double !

2023-04-26 17:31:25
Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière !

2023-04-26 17:27:32
Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes

2023-04-25 19:57:58
Un article pour comprendre le modèle singleton en JavaScript

2023-04-25 19:53:11
En savoir plus sur les tampons dans Node

2023-04-25 19:49:11
Découvrez comment écrire des tests unitaires dans Vue3

2023-04-25 19:41:54

Derniers numéros

Importer des fichiers jQuery

Depuis 1970-01-01 08:00:00

javascript - L'utilisation de jquery dans Vue échoue. Peut-il être utilisé lorsque jquery est introduit, mais le plug-in qui introduit jquery n'est pas défini? ?

Depuis 1970-01-01 08:00:00

javascript - Comment introduire Jquery avec Vue+Webpack

Depuis 1970-01-01 08:00:00

problème php+jquery

Depuis 1970-01-01 08:00:00

javascript - Comment puis-je importer certaines méthodes JQuery?

Depuis 1970-01-01 08:00:00

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Tutoriel vidéo approfondi jQuery

25635
classe amusante jquery (version de démarrage rapide)

57272
Tutoriel vidéo de base pour démarrer avec jQuery

58743
Tutoriel vidéo de démarrage du framework jQuery UI

37816
Classe amusante jQuery

43749

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal


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.