[JavaScript] 제이쿼리(jQuery) 다음요소 찾기(next) 자바스크립트로 구현

다음요소 찾기

JavaScript에서 기본적으로 제공하는 nextElementSibling 기능은 단순히 선택된 요소의 다음 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다.

next()

• jQuery의 next()와 동일한 기능을 JavaScript로 구현
• 매개변수 selector가 제공되는 경우에는 다음 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다.

function next(ele, selector) {
    var nextEl = ele.nextElementSibling;
    if (!selector || (nextEl && nextEl.matches(selector))) {
        return nextEl;
    }
    return null;
}

nextAll()

• jQuery의 nextAll()와 동일한 기능을 JavaScript로 구현
• 다음 요소가 없거나 매개변수 selector와 일치하는 다음 요소를 찾을 수 없는 경우에는 빈 배열을 반환한다.

function nextAll(ele, selector) {
    var nextAllElements = [];
    var currentElement = ele.nextElementSibling;
    while (currentElement) {
        if (!selector || currentElement.matches(selector)) {
            nextAllElements.push(currentElement);
        }
        currentElement = currentElement.nextElementSibling;
    }
    return nextAllElements;
}

---

예시

<ul>
    <li class="apple">사과</li>
    <li class="banana">바나나</li>
    <li class="pineapple">파인애플</li>
    <li class="strawberry">딸기</li>
</ul>

var bananaEle = document.querySelector('.banana'); // 바나나
var appleEle = document.querySelector('.sample .apple'); // 사과
var strawberryEle = document.querySelector('.strawberry'); // 딸기

// 바나나의 다음요소
next(bananaEle).style.color = 'red'

// 사과 다음요소가 바나나과 일치하는 경우
next(appleEle, '.banana').style.color = 'red'

// 바나나의 다음요소 모두
var nextAllElement = nextAll(bananaEle);
nextAllElement.forEach(function(item) {
    item.style.color = 'red'
})

// 바나나의 다음요소 중 딸기와 일치하는 경우
var nextAllElement = nextAll(bananaEle, '.strawberry');
nextAllElement.forEach(function(item) {
    item.style.color = 'red'
})

결과물

• 사과
• 바나나
• 파인애플
• 딸기