web-dev-qa-db-fra.com

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

Pour des raisons de performances, j'essaie de trouver un moyen de sélectionner uniquement les nœuds frères 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 noeud inner1, puis-je accéder à ses frères et sœurs, inner2-4 nœuds?

javascriptdomsiblings
83
codingbear

Eh bien, bien sûr, il suffit de contacter le parent puis les enfants.

 node.parentNode.childNodes[]

ou ... en utilisant jQuery:

$('#innerId').siblings()

Edit: Cletus, comme toujours, est inspirant. J’ai creusé plus loin. C’est ainsi que jQuery obtient essentiellement des frères et sœurs:

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);
}
124
cgp
var sibling = node.nextSibling;

Cela retournera le frère immédiatement après ou aucun autre frère ne sera disponible. De même, vous pouvez utiliser previousSibling.

[Edit] À la réflexion, cela ne donnera pas la prochaine balise div, mais les espaces après le nœud. Mieux semble être

var sibling = node.nextElementSibling;

Il existe également un previousElementSibling.

90
parvus

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)
10
roundar

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;
    }

le n.nodeType == 1 vérifie si l'élément est un nœud html et n! == exclut l'élément actuel.

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

6
Nicolas Rojo

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

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

var n = element, ret = [];
while (n = n.nextElementSibling){
  ret.Push(n)
}
return ret;
6
pery mimon

Il y a plusieurs façons de le faire.

L'un ou l'autre des éléments suivants devrait faire l'affaire. 

// METHOD A (ARRAY.FILTER, STRING.INDEXOF)
var siblings = function(node, children) {
    siblingList = children.filter(function(val) {
        return [node].indexOf(val) != -1;
    });
    return siblingList;
}

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.Push)
var siblings = function(node, children) {
    var siblingList = [];
    for (var n = children.length - 1; n >= 0; n--) {
        if (children[n] != node) {
            siblingList.Push(children[n]);
        }  
    }
    return siblingList;
}

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE)
var siblings = function(node, children) {
   siblingList = children;
   index = siblingList.indexOf(node);
   if(index != -1) {
       siblingList.splice(index, 1);
   }
   return siblingList;
}

Pour votre information, la base de code jQuery est une excellente ressource pour l’observation de Javascript de niveau A.

Voici un excellent outil qui révèle la base de code jQuery de manière très simple. http://james.padolsey.com/ jquery /

6
abbotto

Voici comment vous pouvez obtenir le précédent, le suivant et tous les frères et soeurs (des deux côtés):

function prevSiblings(target) {
   var siblings = [], n = target;
   while(n = n.previousElementSibling) siblings.Push(n);
   return siblings;
}

function nextSiblings(target) {
   var siblings = [], n = target;
   while(n = n.nextElementSibling) siblings.Push(n);
   return siblings;
}

function siblings(target) {
    var prev = prevSiblings(target) || [],
        next = nexSiblings(target) || [];
    return prev.concat(next);
}
2
Maciej Sitko

Utilisez document.querySelectorAll () et Boucles et itérations

function sibblingOf(children,targetChild){
  var children = document.querySelectorAll(children);
  for(var i=0; i< children.length; i++){
    children[i].addEventListener("click", function(){
      for(var y=0; y<children.length;y++){children[y].classList.remove("target")}
      this.classList.add("target")
    }, false)
  }
}

sibblingOf("#outer >div","#inner2");
#outer >div:not(.target){color:red}
<div id="outer">
      <div id="inner1">Div 1 </div>
      <div id="inner2">Div 2 </div>
      <div id="inner3">Div 3 </div>
      <div id="inner4">Div 4 </div>
 </div>
1
Gildas.Tambo
var childNodeArray = document.getElementById('somethingOtherThanid').childNodes;
0
Thunderboltz

jQuery

$el.siblings();

Native - dernier, Edge13 +

[...el.parentNode.children].filter((child) =>
  child !== el
);

Native (alternative) - dernière version, Edge13 +

Array.from(el.parentNode.children).filter((child) =>
  child !== el
);

Natif - IE10 +

Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);
0
Humoyun Ahmad

1) Ajouter la classe sélectionnée à l'élément cible
2) Trouver tous les enfants de l'élément parent à l'exclusion de l'élément cible
3) Supprimer la classe de l'élément cible

 <div id = "outer">
            <div class="item" id="inner1">Div 1 </div>
            <div class="item" id="inner2">Div 2 </div>
            <div class="item" id="inner3">Div 3 </div>
            <div class="item" id="inner4">Div 4 </div>
           </div>



function getSiblings(target) {
    target.classList.add('selected');
    let siblings = document.querySelecttorAll('#outer .item:not(.currentlySelected)')
    target.classList.remove('selected'); 
return siblings
    }
0
Manoj Yadav