Javascript 有没有选择同级节点的方法？

出于某些性能原因，我试图找到一种只选择所选节点的同级节点的方法

比如说,

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

---

如果我选择了inner1节点，是否有办法访问它的同级节点，

inner2-4

节点？

那么。。。当然只需访问父级，然后访问子级

 node.parentNode.childNodes[]

或者。。。使用jQuery：

$('#innerId').siblings()

编辑：克莱特斯一如既往地令人振奋。我进一步挖掘。这就是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);
}

这将在它之后立即返回同级，或者null，不再有可用的同级。同样，您也可以使用

以前的兄弟姐妹

[Edit]仔细想想，这不会给出下一个
div
标记，而是节点后面的空格。似乎更好

var sibling = node.nextElementSibling;

还有一个
以前的元素Sibling
您在jQuery中检查过“Sibling”方法吗

    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。
有几种方法可以做到这一点。

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

以下任何一项都可以达到目的。

// 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的绝佳资源。

// 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代码库。
使用和


函数sibblingOf（子项，目标项）{
var children=document.queryselectoral（children）；
对于（变量i=0；i


第一组
第2组
第3组
第4组
以下是如何获得上一个、下一个和所有兄弟姐妹（双方）：

快速：


获取父元素的子元素作为数组，过滤掉此元素

编辑：

和筛选文本节点（谢谢）：

2017年起：

简单的回答是：
element.nextElementSibling
用于获取正确的元素同级。另外，您还有
element.previousElementSibling
用于上一个元素

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

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

下面的函数将返回一个数组，其中包含给定元素的所有同级


const getsides=node=>[…node.parentNode.children].filter（c=>c！==node）
//获取“c”元素同级（不包括自身）
const siblingsToC=getsibbins（document.querySelector（'.c'））
console.log（siblingsToC）

a
b
c
d'>
e
1）将所选类添加到目标元素
2）查找不包括目标元素的父元素的所有子元素
3）从目标元素中删除类

 <div id = "outer">
            <div class="item" id="inner1">Div 1 </div>
            <div class="item" id="inner2">Div 2 </div>
            <div class="item" id="inner3">Div 3 </div>
            <div class="item" id="inner4">Div 4 </div>
           </div>



function getSiblings(target) {
    target.classList.add('selected');
    let siblings = document.querySelecttorAll('#outer .item:not(.currentlySelected)')
    target.classList.remove('selected'); 
return siblings
    }


第一组
第2组
第3组
第4组
函数GetSides（目标）{
target.classList.add（'selected'）；
让兄弟姐妹=document.queryselectorall（“#outer.item:not（.currentlySelected）”
target.classList.remove（'selected'）；
返回兄弟姐妹
}
jQuery

$el.siblings();

本地-最新版本，Edge13+

[...el.parentNode.children].filter((child) =>
  child !== el
);

Array.from(el.parentNode.children).filter((child) =>
  child !== el
);

本地（替代）-最新，Edge13+

[...el.parentNode.children].filter((child) =>
  child !== el
);

Array.from(el.parentNode.children).filter((child) =>
  child !== el
);

本地-IE10+

Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

您可以使用属性访问以下同级节点

这就是事件委派方式的实现方式，它是一种添加事件侦听器的动态方式

 document.addEventListener('click', (event) => {
   if (event.target.matches("#inner1")) {
    console.log(event.targert.nextSibling); //inner2 div
    console.log(event.targert.nextSibling.nextSibling); //inner3 div 
    /* The more of the property you keep appending the further it goes to 
    the next sibling */
   }
 })

请注意，jquery.sibles（）将当前节点从结果集中排除。这是一个非常好的功能！实际上，jquery中node.parentNode.childNodes[]的等效项实际上是$（node.parent（）.children（）而不是$（node.sibles（））。这可能是一个不错的功能，但也可能很烦人。这取决于您想要什么。您需要使用NODE.parentNode.childNodes检查元素\节点节点，因为它也会为您提供空白文本节点。没什么，我认为这是一个错误--很抱歉（删除）窗口。document.documentElement.childNodes[1]。childNodes[4]从它那里得到的是问题的任何解决方案吗？这并不能解决手头的问题，或者至少不够清楚，不足以发挥作用。从IE9开始，IE8不支持next/previousElementSibling。另请参见，它应该返回所有同级，而不仅仅是
next
或
previous
。指定确切的后退或f在这种情况下，orward没有多大帮助。为什么不呢。如果你采取“下一步”和“上一步”，你就可以了解整个情况。这就是答案，它展示了一种新的做事方式。并为读者贡献了一些东西。只需为每个元素添加父元素并过滤当前元素，每个人都可以完成解决方案。不过，我会检查nodeType以丢弃文本node
[…n.parentNode.children].filter（c=>c.nodeType==1&&c！=n）
如何修改typescript的此选项？
Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

 document.addEventListener('click', (event) => {
   if (event.target.matches("#inner1")) {
    console.log(event.targert.nextSibling); //inner2 div
    console.log(event.targert.nextSibling.nextSibling); //inner3 div 
    /* The more of the property you keep appending the further it goes to 
    the next sibling */
   }
 })