camarade jQuery

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

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

camarade jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]