Есть ли способ выбора узлов-братьев?

Question

По некоторым причинам производительности я пытаюсь найти способ выбрать только узлы-близнецы выбранного узла. Например,

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

Если я выбрал inner1 узел, есть ли способ для меня, чтобы получить доступ к своим братьям и сестрам, inner2-4 узлов?

Answer 1

Ну ... конечно ... просто обращайтесь к родителям, а затем к детям.

node.parentNode.childNodes[] 

или ... с помощью JQuery:

$('#innerId').siblings() 

Edit: Клетуса как всегда вдохновляет. Я потянулся дальше. Это как JQuery получает брат и сестра по существу:

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; 

Это немедленно вернуть брат после этого, или нуля не больше братий и сестер доступны. Аналогично, вы можете использовать previousSibling.

[Изменить] С другой стороны, это не даст следующий тег div, но пробел после узла. Лучше, кажется,

var sibling = node.nextElementSibling; 

Там также существует previousElementSibling.

Answer 4

Вы проверили метод «Sibling» в 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 проверить, если элемент является HTML узел и п! == исключить текущий элемент.

Я думаю, вы можете использовать ту же функцию, все, что код, кажется, ванильный javascript.

Answer 5

Существует несколько способов сделать это.

Любой из следующих способов должен сделать трюк.

// 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 является большим ресурсом для наблюдения Grade A Javascript.

Вот отличный инструмент, который очень хорошо раскрывает кодовую базу jQuery. http://james.padolsey.com/jquery/

Answer 6

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

Answer 7

Использование document.querySelectorAll() и 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

Вот как вы могли бы получить предыдущий, следующий и все братья и сестры (с обеих сторон):

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

Быстрые:

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

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

Получить ребенок родителя в качестве массива, отфильтровывать этот элемент.

Answer 10

От 2017:
простой ответ: element.nextElementSibling для получения правильного элемента родственного брата. Также у вас есть element.previousElementSibling за предыдущий один

здесь довольно просто получили весь последующий sibiling

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