jQuery를 사용한 특정 클래스를 가진 리스트 아이템의 하위 모든 리스트 요소 선택하기

jQuery의 find() 메서드를 사용하면 선택한 요소 내에서 하위 요소를 찾을 수 있습니다. 이를 활용하여 특정 클래스를 가진 리스트 아이템 내에서 하위 모든 리스트 요소를 선택할 수 있습니다. 아래 예제를 통해 find() 메서드를 사용하여 특정 클래스를 가진 리스트 아이템의 하위 모든 리스트 요소를 선택하는 방법을 알아보겠습니다.

예제 1: 특정 클래스를 가진 리스트 아이템의 하위 모든 리스트 요소 선택하기

$(document).ready(function() {
    $("li.item-ii").find("ul li").css("color", "blue");
});

이 예제는 클래스가 "item-ii"인 리스트 아이템을 선택한 후에, 해당 리스트 아이템 내의 모든 하위 ul 요소에서 li 요소를 찾아 글꼴 색상을 파란색으로 변경합니다.

예제 2: 특정 클래스를 가진 리스트 아이템의 하위 모든 텍스트 요소 선택하기

$(document).ready(function() {
    $("li.item-ii").find("*").filter(function() {
        return this.nodeType === 3; // 텍스트 노드만 필터링
    }).css("font-style", "italic");
});

이 예제는 클래스가 "item-ii"인 리스트 아이템을 선택한 후에, 해당 리스트 아이템 내의 모든 하위 요소 중에서 텍스트 노드를 찾아 글꼴 스타일을 이탤릭체로 변경합니다.

예제 3: 특정 클래스를 가진 리스트 아이템의 하위 모든 링크 요소 선택하기

$(document).ready(function() {
    $("li.item-ii").find("a").addClass("highlight");
});

이 예제는 클래스가 "item-ii"인 리스트 아이템을 선택한 후에, 해당 리스트 아이템 내의 모든 하위 링크 요소에 "highlight" 클래스를 추가합니다.