Maison  >  Article  >  interface Web  >  Comment trouver le nombre d'éléments frères et sœurs dans jquery

Comment trouver le nombre d'éléments frères et sœurs dans jquery

青灯夜游
青灯夜游original
2022-05-16 16:17:402070parcourir

Méthode d'obtention : 1. Utilisez siblings() pour obtenir les éléments frères de l'élément spécifié. La syntaxe "specified element.siblings()" renverra un objet jQuery contenant tous les éléments frères et sœurs ; renvoyez-le à l'objet jQuery. Le nombre d'éléments, la syntaxe est "spécifier objet.longueur".

Comment trouver le nombre d'é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.

Méthode Jquery pour trouver le nombre d'éléments frères et sœurs

1 Utilisez la méthode siblings() pour obtenir tous les éléments frères de l'élément sélectionné

Cette méthode avance et avance le long des éléments frères de l'élément frère. Élément DOM Traverse plus tard.

指定元素.siblings()

renverra un objet jQuery contenant tous les éléments frères.

2. Utilisez l'attribut length pour obtenir le nombre

L'attribut length comptera le nombre d'éléments dans l'objet jQuery et le renverra.

指定对象.length

Exemple d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.siblings,.siblings *{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("h2").siblings().css("border","2px solid red")
					var len=$("h2").siblings().length;
					console.log("兄弟元素的个数为:"+len); 
				});
			});
		</script>
	</head>
	<body>
		<div class="siblings">div (父)
			<p>p(兄弟元素)</p>
			<span>span(兄弟元素)</span>
			<h2>h2(本元素)</h2>
			<h3>h3(兄弟元素)</h3>
			<p>p(兄弟元素)</p>
		</div>
		<button>获取兄弟元素的个数</button>
	</body>
</html>

Comment trouver le nombre déléments frères et sœurs dans jquery

[Apprentissage recommandé : Tutoriel vidéo 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