Czy istnieje sposób wyboru węzłów siostrzanych?

Question

Dla niektórych powodów wydajności, próbuję znaleźć sposób na wybranie tylko węzłów siostrzanych wybranego węzła. Na przykład,

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

Jeśli wybrany węzeł inner1, czy jest jakiś sposób dla mnie, aby uzyskać dostęp do jego rodzeństwa, inner2-4 węzły?

Answer 1

Cóż ... na pewno ... po prostu wejdź do rodzica, a następnie do dzieci.

node.parentNode.childNodes[] 

... lub przy użyciu jQuery:

$('#innerId').siblings() 

Edycja: Cletus jak zawsze inspiruje. Wykopałem dalej. W ten sposób jQuery pobiera rodzeństwa zasadniczo:

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; 

to natychmiast zwróci rodzeństwo po niej lub null nie więcej rodzeństwa są dostępne. Podobnie można użyć previousSibling.

[Edytuj] Po drugie, nie da to następnego znacznika div, ale białych znaków za węzłem. Wydaje się być lepszym

var sibling = node.nextElementSibling; 

Istnieje również previousElementSibling.

Answer 4

Czy sprawdziłeś metodę "Rodzeństwo" w jQuery?

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

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

     return r; 
    } 

n.nodeType == 1 Sprawdź, czy element jest węzłem html i n! == wykluczenia aktualny element.

Myślę, że można użyć tej samej funkcji, cały kod wydaje się być vanilla javascript.

Answer 5

Istnieje kilka sposobów, aby to zrobić.

Jedna z poniższych czynności powinna wystarczyć.

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

FYI: JQuery kod baza jest doskonałym źródłem do obserwowania Grade A Javascript.

Oto doskonałe narzędzie, które odsłania bazę kodu jQuery w bardzo opływowy sposób. http://james.padolsey.com/jquery/

Answer 6

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

Answer 7

Zastosowanie document.querySelectorAll() i 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

Oto jak można dostać poprzedni, następny i wszystkie rodzeństwo (obie strony):

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

Szybkie:

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

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

Get dzieci rodzica jako tablica, odfiltrować ten element.

Answer 10

Od 2017:
Prosta odpowiedź: element.nextElementSibling za uzyskanie odpowiedniego elementu rodzeństwa. również masz element.previousElementSibling do poprzedniego

stąd jest dość prosta dostał wszystko następna sibiling

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