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.
Parcours horizontal dans l'arborescence DOM
Il existe de nombreuses méthodes utiles qui nous permettent de parcourir l'arborescence DOM horizontalement :
frères et sœurs()
suivant()
suivantTout()
nextUntil()
prev()
prevAll()
-
prevUntil()
méthode jQuery siblings()
la méthode siblings() renvoie la sélectionné Tous les frères et sœurs d’un élément.
L'exemple suivant renvoie tous les éléments frères de <h2> :
<!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>Exécutez le programme pour l'essayer
Vous pouvez également utiliser des paramètres facultatifs pour filtrer paires de frères et sœurs Recherche d'éléments.
L'exemple suivant renvoie tous les éléments <p> qui sont frères et sœurs de <h2> :
<!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écutez le programme pour l'essayer
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> :
<!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écutez le programme et essayez-le
jQuery nextAll () Méthodes 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> :
<!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écutez le programme pour l'essayer
jQuery Méthode nextUntil()
La méthode nextUntil() renvoie tous les éléments frères suivants entre les deux paramètres donnés.
L'exemple suivant renvoie tous les éléments frères entre les méthodes <h2> 🎜>Query prev(), prevAll() et prevUntil()
prev(), prevAll() et les méthodes prevUntil() fonctionnent de la même manière que les méthodes ci-dessus, sauf que c'est juste la direction opposée : elles renvoient l'élément frère précédent (en reculant le long des éléments frères dans l'arborescence DOM, pas en avant).
section suivante
