出于某些性能原因，我试图找到一种方法来仅选择所选节点的同级节点。
例如，
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
<div id="inner4"></div>
</div>
如果我选择了inner1节点，有没有办法让我访问它的兄弟inner2-4节点，节点？
有没有办法选择兄弟节点？
IT技术
javascript
dom
siblings
2021-02-03 23:59:33
6个回答
嗯......当然......只需访问父母，然后访问孩子。
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);
}
var sibling = node.nextSibling;
这将在它之后立即返回同级，或者 null 没有更多的同级可用。同样，您可以使用previousSibling.
[编辑] 再想一想，这不会给出下一个div标签，而是节点后面的空格。更好的似乎是
var sibling = node.nextElementSibling;
还有一个previousElementSibling.
快的：
var siblings = n => [...n.parentElement.children].filter(c=>c!=n)
https://codepen.io/anon/pen/LLoyrP?editors=1011
将父元素的子元素作为数组获取，过滤掉这个元素。
编辑：
并过滤掉文本节点（感谢pmrotule）：
var siblings = n => [...n.parentElement.children].filter(c=>c.nodeType == 1 && c!=n)
从 2017 年开始：
直接回答：element.nextElementSibling为了获得正确的元素兄弟。你也有element.previousElementSibling上一个
从这里获得所有下一个兄弟姐妹非常简单
var n = element, ret = [];
while (n = n.nextElementSibling){
ret.push(n)
}
return ret;
您是否检查过 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!== 排除当前元素。
我认为您可以使用相同的功能，所有这些代码似乎都是普通的 javascript。