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 :

StopPropagation() ou Empêcher un évenement de se propager aux parents de l'élément
Jquery récupérer les valeurs de checkbox, select et radio
Faire clignoter un élément avec JQuery
Comment faire des opérations avec les attributs de style exprimés en px
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
Modifier l'attribut src d'une image avec JQuery
DatePicker de JQuery : Déployer le calendrier à l'ouverture de la page
Charger JQuery directement via les librairies google
Apparition d'un élément en fondu avec JQuery sur le survol de souris
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