Existe-t-il un moyen de sélectionner les nœuds frères et sœurs ?

Question

Pour certaines raisons de performance, j'essaie de trouver un moyen de sélectionner uniquement les nœuds frères et sœurs du nœud sélectionné.

Par exemple,

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
  <div id="inner4"></div>
</div>

Si j'ai sélectionné le nœud inner1, y a-t-il un moyen pour moi d'accéder à ses frères et sœurs, inner2-4 nœuds ?

Answer 1

Eh bien... bien sûr... il suffit de rendre visite au parent, puis aux enfants.

 node.parentNode.childNodes[]

ou... en utilisant jQuery :

$('#innerId').siblings()

Edit : Cletus est toujours une source d'inspiration. J'ai creusé plus loin. C'est ainsi que jQuery obtient des frères et sœurs essentiellement :

function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling ) 
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );        
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}

Answer 2

var sibling = node.nextSibling;

Cela renverra le frère ou la sœur immédiatement après, ou NULL aucun frère ou sœur n'est disponible. De même, vous pouvez utiliser previousSibling.

[Modifier] Après mûre réflexion, cela ne donnera pas la prochaine balise div, mais l'espace blanc après le nœud. Mieux semble être

var sibling = node.nextElementSibling;

Il existe également un previousElementSibling.

Answer 3

Rapide :

var siblings = n => [...n.parentElement.children].filter(c=>c!=n)

https://codepen.io/anon/pen/LLoyrP?editors=1011

Obtenez les enfants du parent sous forme de tableau, filtrez cet élément.

Modifier :

Et pour filtrer les nœuds de texte (Merci pmrotule) :

var siblings = n => [...n.parentElement.children].filter(c=>c.nodeType == 1 && c!=n)

Answer 4

À partir de 2017 :
réponse simple : element.nextElementSibling pour obtenir le bon élément fraternel. aussi vous avez element.previousElementSibling pour le précédent

à partir d'ici est assez simple d'obtenir tous les prochains sibiling

var n = element, ret = [];
while (n = n.nextElementSibling){
  ret.push(n)
}
return ret;

Answer 5

avez-vous vérifié la méthode « Sibling » dans jQuery ?

    sibling: function( n, elem ) {
        var r = [];

        for ( ; n; n = n.nextSibling ) {
            if ( n.nodeType === 1 && n !== elem ) {
                r.push( n );
            }
        }

        return r;
    }

the n.nodeType == 1 check if the element is a html node and n !== exclude the current element.

Je pense que vous pouvez utiliser la même fonction, tout ce code semble être vanille javascript.