jQuery를 사용한 이벤트 타겟의 가장 가까운 조상(li) 요소 선택하기

jQuery의 closest() 메서드는 이벤트 타겟의 가장 가까운 조상 요소를 선택하는 데 사용됩니다. 이는 이벤트가 발생한 요소의 조상 중에서 특정 요소를 선택해야 할 때 유용합니다. 아래 예제를 통해 closest() 메서드를 사용하여 이벤트 타겟의 가장 가까운 조상 li 요소를 선택하는 방법을 알아보겠습니다.

예제 1: 클릭된 요소의 가장 가까운 조상 li 요소 선택하기

$(document).ready(function() {
    $("button").click(function(event) {
        var closestLi = $(event.target).closest("li");
        closestLi.css("background-color", "yellow");
    });
});

이 예제는 버튼이 클릭될 때마다 클릭된 요소의 가장 가까운 조상 li 요소를 선택하고, 해당 요소의 배경색을 노란색으로 변경합니다.

예제 2: 마우스 오버된 요소의 가장 가까운 조상 li 요소 선택하여 스타일 변경하기

$(document).ready(function() {
    $("p").mouseenter(function(event) {
        var closestLi = $(event.target).closest("li");
        closestLi.addClass("highlight");
    });
});

이 예제는 마우스가 요소 위로 올라갈 때마다 마우스 오버된 요소의 가장 가까운 조상 li 요소를 선택하고, 해당 요소에 "highlight" 클래스를 추가합니다.

예제 3: 특정 클래스를 가진 요소의 가장 가까운 조상 li 요소 선택하여 스타일 변경하기

$(document).ready(function() {
    $(".child").click(function(event) {
        var closestLi = $(event.target).closest("li");
        closestLi.fadeOut();
    });
});

이 예제는 클래스가 "child"인 요소가 클릭될 때마다 해당 요소의 가장 가까운 조상 li 요소를 선택하고, 해당 요소를 서서히 페이드아웃 처리합니다.