有没有办法select兄弟节点？

出于一些性能的原因，我试图find一种方法来select只select节点的兄弟节点。 例如，

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

如果我selectinner1节点，有没有办法让我访问它的兄弟姐妹，inner2-4节点？

Answer 1

那么…确定…只要访问父母，然后是孩子。

  node.parentNode.childNodes[] 

或者…使用jQuery：

 $('#innerId').siblings() 

编辑：Cletus一如既往鼓舞人心。 我挖得更远 这就是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 sibling = node.nextSibling; 

这将在它之后立即返回兄弟，或者不再有兄弟可用。 同样，你可以使用previousSibling 。

[编辑]第二个想法，这不会给下一个div标记，但节点后的空白。 好像是

 var sibling = node.nextElementSibling; 

还有一个previousElementSibling 。

Answer 3

有几种方法可以做到这一点。

以下任何一种都可以做到这一点。

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

仅供参考：jQuery代码库是观察A级Javascript的极好资源。

这是一个非常优秀的工具，以非常简洁的方式显示jQuery代码库。 http://james.padolsey.com/jquery/

Answer 4

你有没有检查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节点，n！==排除当前元素。

我认为你可以使用相同的function，所有的代码似乎是香草的JavaScript。

Answer 5

快：

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

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

将父项的子项作为一个数组，过滤掉这个元素。

Answer 6

从2017年起：
直截了当的答案： element.nextElementSibling获取正确的元素兄弟。 还有你以前的element.previousElementSibling

从这里很容易得到所有下一个兄弟

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

Answer 7

使用document.querySelectorAll（）和循环和迭代

 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

 var childNodeArray = document.getElementById('somethingOtherThanid').childNodes; 

Answer 9

以下是如何获得上一个，下一个和所有兄弟姐妹（双方）：

 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 10

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