-
See the Pen 바닐라 자바스크립트 siblings 기능 (Vanilla js siblings function) by kimyangsun (@kimyangsun) on CodePen.
바닐라 자바스크립트 sibilings 기능 (Vanilla js siblings function) 입니다.
제이쿼리를 사용할때 선택자로 엘리먼트를 하나 잡고 siblings() 를 이용하여 나머지 형제들을 선택하는 경우가 많은데
바닐라 자바스크립트에서는 그 기능을 그대로 사용하려면 따로 만들어서 사용해주어야 하기 때문에 함수 형태로 만든 코드를 올립니다. :)
console.clear(); const first = document.querySelector(".first"); // 화살표 함수 //let siblings = element => [...element.parentElement.children].filter(value => value != element) // 일반 함수 function siblings(element) { return [...element.parentElement.children].filter(value => value != element) } // 첫번째 아이템의 형제들 let firstItemBrothers = siblings(first); console.log(firstItemBrothers); // <div class="two"></div>, <div class="three"></div> firstItemBrothers.forEach((item) => { item.classList.add('red'); // 첫번째 아이템의 형제들에게 red 클래스를 줌 });
'코딩 기록 > 자바스크립트' 카테고리의 다른 글
자바스크립트 여러가지 종류의 좌표 찾기 (screenX, screenY, pageX, pageY, clientX, clientY, offsetX, offsetY) (0) 2023.08.08 자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분하는 코드 (0) 2023.08.07 [자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 (0) 2023.01.28 new Date(), toLocaleDateString (현재 날짜,시간 표시하기 / JavaScript) (0) 2021.03.06 (JavaScript) 자바스크립트 큐(Queue, FIFO) 자료구조 구현 (0) 2021.02.09 댓글