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

이전요소 찾기

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

prev()

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

function prev(ele, selector) {
    var prevEle = ele.previousElementSibling;
    if (!selector || (prevEle && prevEle.matches(selector))) {
        return prevEle;
    }
    return null;
}

prevAll()

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

function prevAll(ele, selector) {
    var prevAllEle = [];
    var currentEle = ele.previousElementSibling;
    while (currentEle) {
        if (!selector || currentEle.matches(selector)) {
            prevAllEle.push(currentEle);
        }
        currentEle = currentEle.previousElementSibling;
    }
    return prevAllEle;
}

---

예시

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

var bananaEle = document.querySelector('.banana'); // 바나나
var strawberryEle = document.querySelector('.strawberry'); // 딸기

// 바나나의 이전요소
prev(bananaEle).style.color = 'red'

// 딸기의 이전요소가 파인애플과 일치하는 경우
prev(strawberryEle, '.pineapple').style.color = 'red'

// 딸기의 이전요소 모두
var prevAllEle = prevAll(strawberryEle);
prevAllEle.forEach(function(item) {
    item.style.color = 'red'
})

// 딸기의 이전요소 중 바나나와 일치하는 경우
var prevAllEle = prevAll(strawberryEle, '.banana');
prevAllEle.forEach(function(item) {
    item.style.color = 'red'
})

결과물

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