jQuery를 사용한 하위에 리스트를 포함한 리스트 아이템 선택하기

jQuery의 has() 메서드는 선택한 요소 집합 중에서 특정 하위 요소를 포함한 요소를 선택하는 데 사용됩니다. 이를 활용하여 리스트 아이템 중에서 하위에 리스트를 포함한 요소를 선택하고 조작할 수 있습니다. 아래 예제를 통해 has() 메서드를 사용하여 리스트 아이템 중에서 하위에 리스트를 포함한 요소를 선택하는 방법을 알아보겠습니다.

예제 1: 리스트 아이템 중에서 하위에 리스트를 포함한 요소 선택하기

$(document).ready(function() {
    $("li").has("ul").css("color", "blue");
});

이 예제는 페이지에서 모든 리스트 아이템 중에서 하위에 리스트를 포함한 요소를 선택하고, 해당 요소의 글꼴 색상을 파란색으로 변경합니다.

예제 2: 하위에 리스트를 포함한 리스트 아이템에 클래스 추가하기

$(document).ready(function() {
    $("li").has("ul").addClass("has-list");
});

이 예제는 페이지에서 모든 리스트 아이템 중에서 하위에 리스트를 포함한 요소를 선택하고, 해당 요소에 "has-list" 클래스를 추가합니다.

예제 3: 하위에 리스트를 포함한 리스트 아이템의 배경색 변경하기

$(document).ready(function() {
    $("li").has("ul").css("background-color", "lightgray");
});

이 예제는 페이지에서 모든 리스트 아이템 중에서 하위에 리스트를 포함한 요소를 선택하고, 해당 요소의 배경색을 연한 회색으로 변경합니다.