[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);
}

답변

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! == 현재 요소를 제외합니다.

동일한 기능을 사용할 수 있다고 생각합니다. 모든 코드는 바닐라 자바 스크립트 인 것 같습니다.

답변

몇 가지 방법이 있습니다.

다음 중 하나가 트릭을 수행해야합니다.

// 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 급 자바 스크립트를 관찰 할 수있는 훌륭한 리소스입니다.

다음은 매우 간소화 된 방식으로 jQuery 코드 기반을 보여주는 훌륭한 도구입니다.
http://james.padolsey.com/jquery/

답변

다음은 이전, 다음 및 모든 형제 (양쪽)를 얻는 방법입니다.

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