자바스크립트에서 siblings() 사용하기 get siblings in pure javascript

자바스크립트에서 jQuery 없이는 너무 귀찮았던 형제선택, siblings()를 써 봅시다.

HTML

간단한 예를 위한 DIV 3형제입니다.

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

JavaScript

ES6

var siblings = t => [...t.parentElement.children].filter(e => e != t);

var one = document.getElementById('one');
console.log(siblings(one));
------------------------------
▶ (2)[div#two, div#three]

위의 ...는 HTMLCollection을 배열로 만들기 위한 것입니다.
Array.from() 등을 사용해도 되겠죠

 

filter()는 조건을 통과하는 요소를 배열로 반환합니다. 

즉 부모노드의 모든 children 배열에서 자기 이외의 요소를 새로운 배열로 반환합니다. 

ES5

function siblings(t) {
  var children = t.parentElement.children;
  var tempArr = [];

  for (var i = 0; i < children.length; i++) {
    tempArr.push(children[i]);
  }

  return tempArr.filter(function(e){
    return e != t;
  });
}

var one = document.getElementById('one');
console.log(siblings(one));

 

결과는 위와 같습니다.