Méthode siblings

La méthode siblings trouve tous les frères et sœurs d'un élément à l'intérieur d'un même parent.

Syntaxe

Obtention des frères et sœurs :

javascript.siblings();

Il est également possible de filtrer les frères et sœurs par un sélecteur donné (seuls les frères et sœurs qui satisfont à ce sélecteur resteront dans l'ensemble) :

javascript.siblings(sélecteur);

Exemple

Trouvons l'élément #test et mettons le texte '!' à tous ses frères et sœurs en utilisant la méthode html :

html<p>outside</p>
<div>
  <p>inside</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p>inside</p>
</div>
<p>outside</p>
javascript$('#test').siblings().html('!');

Le code HTML deviendra alors :

html<p>outside</p>
<div>
  <p>!</p>
  <p>!</p>
  <p id="test">inside</p>
  <p>!</p>
  <p>!</p>
</div>
<p>outside</p>

Exemple

Trouvons l'élément #test et mettons le texte '!' à tous ses frères et sœurs avec la classe www en utilisant la méthode html :

html<p>outside</p>
<div>
  <p>inside</p>
  <p class="www">inside</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p class="www">inside</p>
  <p>inside</p>
</div>
<p>outside</p>
javascript$('#test').siblings('.www').html('!');

Le code HTML deviendra alors :

html<p>outside</p>
<div>
  <p>inside</p>
  <p class="www">!</p>
  <p>inside</p>
  <p id="test">inside</p>
  <p>inside</p>
  <p class="www">!</p>
  <p>inside</p>
</div>
<p>outside</p>

Voir aussi

  • la méthode prev,
    qui permet d'obtenir le frère précédent de l'élément
  • la méthode next,
    qui permet d'obtenir le frère suivant de l'élément
  • la méthode parent,
    qui permet d'obtenir le parent de l'élément