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()

编辑：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;

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

[编辑] 第二个想法，这不会给出下一个div标记，而是提供节点后面的空格。好像似乎是

var sibling = node.nextElementSibling;

还存在previousElementSibling。

Answer 3

快速：

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)

Answer 4

有几种方法可以做到。

以下任一项都可以解决问题。

// 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 5

你在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！==排除当前元素。

我认为你可以使用相同的功能，所有代码似乎都是vanilla javascript。

Answer 6

从2017年开始：
直截了当的答案：element.nextElementSibling获得正确的元素兄弟。你也有element.previousElementSibling前一个

从这里获得所有下一个sibiling非常简单

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

Answer 7

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

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 8

使用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 9

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

Answer 10

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
    }

Answer 11

jQuery

$el.siblings();

本机-最新，Edge13 +

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

原生（替代）-最新，Edge13 +

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

原生-IE10 +

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

Answer 12

您可以使用 currentNode.nextSibiling 属性访问以下同级节点。

这就是你在事件委托方式中的做法，这是一种动态添加事件监听器的方式

 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 */
   }
 })

Answer 13

是的。您需要使用实用程序功能来实现此目的，如此处https://gomakethings.com/how-to-get-all-of-an-elements-siblings-with-vanilla-js/文章中所述。以下函数将返回一个包含给定元素的所有同级元素的数组。

var getSiblings = function (elem) {

  // Setup siblings array and get the first sibling
  var siblings = [];
  var sibling = elem.parentNode.firstChild;

  // Loop through each sibling and push to the array
  while (sibling) {
      if (sibling.nodeType === 1 && sibling !== elem) {
          siblings.push(sibling);
      }
      sibling = sibling.nextSibling
  }

  return siblings;

};

要使用上述方法，请在DOM中找到元素，然后将其传递给getSiblings（）方法。

var element = document.querySelector('#elementId');
var siblings = getSiblings(element);

Answer 14

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

有没有办法选择兄弟节点？

14 个答案: