131

出于某些性能原因,我试图找到一种仅选择所选节点的兄弟节点的方法。

例如,

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

如果我选择了 inner1 节点,有没有办法让我访问它的兄弟inner2-4节点?

4

14 回答 14

165

嗯......当然......只需访问父母,然后是孩子。

 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);
}
于 2009-05-09T00:12:06.717 回答
117
var sibling = node.nextSibling;

这将在它之后立即返回兄弟姐妹,或者 null 没有更多的兄弟姐妹可用。同样,您可以使用previousSibling.

[编辑]再三考虑,这不会给出下一个div标签,而是节点后的空格。似乎更好

var sibling = node.nextElementSibling;

也存在一个previousElementSibling.

于 2011-11-02T08:35:04.623 回答
22

快的:

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-07-18T04:43:00.823 回答
13

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

从这里获得所有下一个兄弟姐妹非常简单

var n = element, ret = [];
while (n = n.nextElementSibling){
  ret.push(n)
}
return ret;
于 2017-09-08T21:38:23.593 回答
8

你检查过 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。

于 2012-08-15T14:52:16.957 回答
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;
}

仅供参考:jQuery 代码库是观察 A 级 Javascript 的绝佳资源。

这是一个出色的工具,它以非常精简的方式展示了 jQuery 代码库。 http://james.padolsey.com/jquery/

于 2014-04-01T23:51:42.843 回答
3

以下函数将返回一个包含给定元素的所有兄弟元素的数组。

const getSiblings = node => [...node.parentNode.children].filter(c => c !== node)

// get "c" element siblings (excluding itself)
const siblingsToC = getSiblings(document.querySelector('.c'))

console.log( siblingsToC )
<ul>
  <li class='a'>a</li>
  <li class='b'>b</li>
  <li class='c'>c</li>
  <li class='d'>d</li>
  <li class='e'>e</li>
</ul>

只需将所选元素getSiblings()作为唯一参数传递给函数即可。

于 2019-03-10T08:44:52.057 回答
2

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

于 2016-06-20T19:25:45.047 回答
2

以下是如何获得上一个、下一个和所有兄弟姐妹(双方):

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);
}
于 2016-08-07T10:04:03.437 回答
1

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
);
于 2019-08-16T00:51:58.703 回答
0
var childNodeArray = document.getElementById('somethingOtherThanid').childNodes;
于 2009-05-09T00:40:44.993 回答
0

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
    }
于 2019-04-18T04:52:54.537 回答
0

您可以使用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 */
   }
 })
于 2021-03-23T16:16:47.940 回答
-2
x1 = document.getElementById('outer')[0]
      .getElementsByTagName('ul')[1]
      .getElementsByTagName('li')[2];
x1.setAttribute("id", "buyOnlineLocationFix");
于 2016-03-24T21:49:20.187 回答