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 :

Not(expr) Element d'exclusion en Jquery
Détecter un click à l'extérieur d'un élément avec JQuery
Comment faire des opérations avec les attributs de style exprimés en px
Détecter lorsqu'on appuie sur la touche entrée en JQuery
Rajouter un élément dans le DOM
Sélecteurs RegExp et JQuery
Afficher une image différente selon la date de l'année en javascript
Empêcher de coller du texte dans un champs input de type text
Ajouter un masque de saisie dans un champs input text
Problème évenement click sous IE
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