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
Atteindre une ancre avec JQuery
Plugin JQuery Select Box / Drop-Down / Liste déroulante. Un joli select
Récupérer le contenu ou afficher du texte dans un textarea en JQuery
Modifier l'attribut src d'une image avec JQuery
Afficher une image différente selon la date de l'année en javascript
Rajouter un élément dans le DOM
Empêcher de coller du texte dans un champs input de type text
$("#calendar").fullCalendar is not a function
Problème(ou pas):JQuery ferme automatiquement les balises HTML
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