le MEMO du WEB développeur
••• JQuery •••  Liste des Mémos, astuces et bonnes pratiques

Siblings() Parcours des frères immédiats d'un élément

La fonction siblings() de JQuery renvoie la liste des frères (du même niveau) d'un élément donné.

Dans l'exemple suivant je parcours les frères DIV de l'élément d'identifiant #mondiv .

Pour le parcours j'utilise la fonction JQuery each().

Je demande d'afficher sur une alerte le contenu html de chaque frère précédé de la variable i qui est  incrémentée automatiquement lors du parcours, elle me donnera l'ordre du frère considéré.

Code HTML :

<div id="parent">
  <div> A </div>
  <div> B </div>
  <div id="mondiv"> C </div>
  <div> D </div>
<div>

Parcours des frères de l'élément 

$("#mondiv").siblings('div').each(function(i){
             alert (i +' : '+$(this).html());
});
// affichera '0 : A' puis '1 : B'  puis '2 : D'

Avertissement :

L'élément $("#mondiv") ne sera pas mentionné dans ses "siblings" ou frères (même s'il porte bien la classe .class_particuliere) !!

Dans le cas où l'on on souhaite parcourir toute la fratrie de l'élement  $("#mondiv"),  en incluant  $("#mondiv") (s'il porte bien la classe .classe_particuliere), il suffit de rechercher les fils div du parent de  $("#mondiv") à l'aide de la fonction JQuery children().

Parcours des frères de l'élément et lui même 

$("#mondiv").parent().children('div').each(function(i){
 alert (i +' : '+$(this).html());
});

 

publié le 13/12/2011 par Memo Web
Commenter le Mémo :

Comment faire des opérations avec les attributs de style exprimés en px
Problème évenement click sous IE
JQuery - Queue() : Attendre qu'une animation se termine avant de commencer la suivante
Ajouter un masque de saisie dans un champs input text
Apparition d'un élément en fondu avec JQuery sur le survol de souris
Savoir si un élément est visible ou hidden
Connaitre le nombre d'éléments possédant une classe définie
Connaître l'URL courante avec jQuery
Empêcher de coller du texte dans un champs input de type text
Afficher une image différente selon la date de l'année en javascript
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos