바닐라 자바스크립트 sibilings 형제 찾기 기능 (Vanilla js siblings function)

자바스크립트 (JavaScript)

 

See the Pen 바닐라 자바스크립트 siblings 기능 (Vanilla js siblings function) by kimyangsun (@kimyangsun) on CodePen.

 

바닐라 자바스크립트 sibilings 기능 (Vanilla js siblings function) 입니다.

제이쿼리를 사용할때 선택자로 엘리먼트를 하나 잡고 siblings() 를 이용하여 나머지 형제들을 선택하는 경우가 많은데

바닐라 자바스크립트에서는 그 기능을 그대로 사용하려면 따로 만들어서 사용해주어야 하기 때문에 함수 형태로 만든 코드를 올립니다. :)

 

/* 바닐라 자바스크립트 siblings 형제 찾는 함수 커스텀 (결과는 배열로 리턴됩니다.) */
// 첫번째 인자에는 엘리먼트,
// 두번째 인자에는 클래스가 들어갑니다. (형제들중 해당하는 클래스를 가진 형제만 가져옴. 상관없으면 생략하면 됨)
function siblings(element, className) {
  return [...element.parentElement.children].filter(item => {
    if (!className) {
      return item != element;
    } else {
      return item != element && item.classList.contains(className);
    }
  });
}


// 첫번째 예시 - 첫번째 아이템의 형제들
const first = document.querySelector(".group1 .first");
let firstItemBrothers = siblings(first);
console.log(firstItemBrothers); // [<div class="item second"></div>, <div class="item third"></div>]

firstItemBrothers.forEach((item) => {
    item.classList.add('red'); // 첫번째 아이템의 형제들에게 red 클래스를 줌
});


// 두번째 예시 - 두번째 아이템의 형제들중 third 클래스를 가진 형제만 선택
const secound = document.querySelector(".group2 .second");
let thirdItem = siblings(secound, 'third');
console.log(thirdItem); // [<div class="item third"></div>]

thirdItem.forEach((item) => {
    item.classList.add('red'); // 첫번째 아이템의 형제들에게 red 클래스를 줌
});