Quelle est l'utilité des frères et sœurs jquery()-Questions et réponses frontales-php.cn

Quelle est l'utilité des frères et sœurs jquery()

青灯夜游

Libérer： 2022-04-21 13:53:56

original

3586 Les gens l'ont consulté

jquery siblings() est utilisé pour obtenir tous les éléments frères de l'élément sélectionné. Il parcourra en avant et en arrière le long des éléments frères de l'élément DOM et renverra tous les éléments enfants qui partagent le même élément parent (à l'exception de l'élément sélectionné) ; La syntaxe "element object.siblings(filter)", ses paramètres peuvent être omis pour restreindre la portée de la recherche.

Quelle est l'utilité des frères et sœurs jquery()

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

La méthode jquery siblings() est utilisée pour obtenir tous les éléments frères 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. La méthode

siblings() parcourra d'avant en arrière le long des éléments frères de l'élément DOM, renvoyant tous les éléments enfants qui partagent le même élément parent (à l'exception de l'élément sélectionné).

Format de grammaire :

$(selector).siblings(filter)

Copier après la connexion

Paramètre	Description
filter	Facultatif. Spécifie une expression de sélecteur qui restreint la recherche d'éléments frères.

Exemple 1 : Renvoyer tous les frères et sœurs de chaque é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>
		<script>
			$(document).ready(function() {
				$("li.start").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">li (兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>

	</body>
</html>

Copier après la connexion

Quelle est lutilité des frères et sœurs jquery()

Exemple 2 : Affiner la recherche (en utilisant deux paramètres Pour filtrer la recherche de similaires éléments)

<!DOCTYPE html>
<html>

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

		<div style="width:500px;" class="siblings">
			<ul>ul(父节点)  
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="1">li(类名为"star"的上一个兄弟节点)</li>
				<li class="start">li (兄弟节点)</li>
				<li>li(类名为"star"的下一个兄弟节点)</li>
				<li class="1">li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们缩小搜索结果只返回在类名为“star”和“stop”的li元素之间类名为“1”的兄弟元素。</p>

	</body>
</html>

Copier après la connexion

Quelle est lutilité des frères et sœurs jquery()