Gibt es eine Möglichkeit, Geschwisterknoten auszuwählen?

Question

Aus Gründen der Leistung versuche ich einen Weg zu finden, nur Geschwisterknoten des ausgewählten Knotens auszuwählen. Zum Beispiel

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

Wenn ich inner1 Knoten ausgewählt, gibt es eine Möglichkeit für mich, seine Geschwister zuzugreifen, inner2-4 Knoten?

Answer 1

Nun ... sicher ... greifen Sie einfach auf die Eltern und dann auf die Kinder.

node.parentNode.childNodes[] 

oder ... mit jQuery:

$('#innerId').siblings() 

Edit: Cletus wie immer inspiriert. Ich grub weiter. Dies ist, wie jQuery bekommt Geschwister im Wesentlichen:

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 childNodeArray = document.getElementById('somethingOtherThanid').childNodes; 

Answer 3

var sibling = node.nextSibling; 

Dies wird den Geschwister unmittelbar nach der Rückkehr oder null nicht mehr Geschwister stehen zur Verfügung. Ebenso können Sie previousSibling verwenden.

[Bearbeiten] Auf den zweiten Gedanken, wird dies nicht die nächste div Tag geben, aber die Leerzeichen nach dem Knoten. Besser scheint

var sibling = node.nextElementSibling; 

Es besteht auch ein previousElementSibling zu sein.

Answer 4

Haben Sie die "Geschwister" -Methode in jQuery überprüft?

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

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

     return r; 
    } 

die n.nodeType == 1 Nachprüfen, ob das Element ein HTML-Knoten ist und n! == das aktuelle Element auszuschließen.

Ich denke, dass Sie die gleiche Funktion verwenden können, scheint dieser Code Vanille JavaScript.

Answer 5

Es gibt ein paar Möglichkeiten, dies zu tun.

Entweder einer der folgenden sollte den Trick tun.

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

Zur Info: Die jQuery-Code-Basis ist eine großartige Ressource für Grade A Javascript beobachten.

Hier ist ein hervorragendes Tool, das die jQuery Code-Basis in einer sehr stromlinienförmigen Art und Weise zeigt. http://james.padolsey.com/jquery/

Answer 6

x1 = document.getElementById('outer')[0] 
     .getElementsByTagName('ul')[1] 
     .getElementsByTagName('li')[2]; 
x1.setAttribute("id", "buyOnlineLocationFix"); 

Answer 7

Verwenden document.querySelectorAll() und Loops and iteration

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>

Answer 8

Hier ist, wie Sie bereits bekommen konnte, nächste und alle Geschwister (beide Seiten):

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

Answer 9

Schnell:

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

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

Holen Sie sich das Kinder als Array der Eltern, filtern dieses Element aus.

Answer 10

Von 2017:
einfache antwort: element.nextElementSibling für das richtige element geschwister. auch Sie haben element.previousElementSibling für vorherige

von hier ist ziemlich einfach all nächstes sibiling

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