vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다.

이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다.

 

 

예제코드

HTML

<ul>
    <li class="one">one</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

jQuery

$(".one").siblings();

JavaScript

const siblings = (el) => [...el.parentElement.children].filter(node => node != el);
 
const one = document.querySelector('.one');
console.log(siblings(one));

// 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다.
// > (2) [li.two, li.three]

 

원리

1. 먼저 인자로 받은 엘리먼트의 부모 엘리먼트 (parentElement)를 구하고 자식(children)들을 배열로 반환한다.
2. 다만 이 때의 배열은 진짜 배열이 아닌 유사배열이라 filter() 고차함수를 사용하기 위해 진짜 배열로 변환해준다.
   Array.from()을 이용하거나 spread 문법으로 변환해준다.
3. 그리고 filter 고차함수로 배열을 하나씩 순회하면서 인자로 받은 엘리먼트가 아닌 것들만 배열로 만들어 반환한다.
4. 즉, 형제 엘리먼트로 이루어진 배열을 반환하게 된다.

 

 

 

 

응용:)

const AllList = Array.from(document.querySelectorAll(".list_item"));

AllList.forEach((item, idx)=>{
	const siblings = AllList.filter(node => node != item);
})

 

 

참고:)

https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-siblings-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[JS] 🚀 자바스크립트로 siblings() 기능 구현하기