camarade jQuery


jQuery Traversal - Frères et sœurs

Les frères et sœurs ont le même élément parent.

Avec jQuery, vous pouvez parcourir les frères et sœurs d'un élément dans l'arborescence DOM. Il existe de nombreuses méthodes utiles qui nous permettent de parcourir l'arborescence DOM horizontalement :

siblings()next()

nextAll()

nextUntil() prev()
prevAll()

prevUntil()

Méthode jQuery siblings()

La méthode siblings() renvoie tous les éléments frères de l'élément sélectionné.

L'exemple suivant renvoie tous les frères et sœurs de <h2> :

Instance

<!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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>
Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher une instance en ligne

Vous pouvez également utiliser des paramètres facultatifs pour filtrer la recherche d'éléments frères.

L'exemple suivant renvoie tous les éléments <p> qui sont frères et sœurs de <h2> :

Instances
<!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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode jQuery next()

La méthode next() renvoie l'élément frère suivant de l'élément sélectionné.

Cette méthode ne renvoie qu'un seul élément. L'exemple suivant renvoie l'élément frère suivant de <h2> :

Instance

<!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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

jQuery nextAll( ) méthode< La méthode 🎜>

nextAll() renvoie tous les éléments frères suivants de l'élément sélectionné.

L'exemple suivant renvoie tous les éléments frères suivants de <h2> :

Instance

<!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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

Exécuter l'instance» Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthode jQuery nextUntil()

nextUntil() méthode renvoie le introduction Tous les éléments frères suivants entre les deux arguments donnés.

L'exemple suivant renvoie tous les éléments frères entre les éléments <h2> et <h6> :

Instance

<!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="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Méthodes jQuery prev(), prevAll() et prevUntil()

méthodes prev(), prevAll() et prevUntil() Fonctionne de la même manière que les méthodes ci-dessus, mais dans la direction opposée : elles renvoient les éléments frères précédents (en parcourant les éléments frères vers l'arrière dans l'arborescence DOM, plutôt que vers l'avant).