jQuery를 사용한 선택한 요소의 자식 요소(children) 중 특정 클래스를 가진 요소 선택하기

jQuery의 children() 메서드를 사용하면 선택한 요소의 자식 요소 중에서 특정 클래스를 가진 요소를 선택할 수 있습니다. 이는 특정 부모 요소 아래에 있는 특정 클래스를 가진 자식 요소를 선택하고 조작해야 할 때 유용합니다. 아래 예제를 통해 children() 메서드를 사용하여 자식 요소 중 특정 클래스를 가진 요소를 선택하는 방법을 알아보겠습니다.

예제 1: 모든 div 요소의 자식 요소 중에서 선택된(selected) 클래스를 가진 요소 선택하기

$(document).ready(function() {
    $("div").children(".selected").css("color", "red");
});

이 예제는 모든 div 요소의 자식 요소 중에서 클래스가 "selected"인 요소를 선택하고, 해당 요소의 글꼴 색상을 빨간색으로 변경합니다.

예제 2: 특정 부모 요소 아래의 자식 요소 중에서 선택된(selected) 클래스를 가진 요소 선택하기

$(document).ready(function() {
    $("#parentContainer").children(".selected").fadeOut();
});

이 예제는 id가 "parentContainer"인 부모 요소의 자식 요소 중에서 클래스가 "selected"인 요소를 선택하고, 해당 요소를 서서히 페이드아웃 처리합니다.

예제 3: 특정 클래스를 가진 요소의 자식 요소 중에서 다른 클래스를 가진 요소 선택하기

$(document).ready(function() {
    $(".parent-class").children(".child-class").addClass("highlight");
});

이 예제는 클래스가 "parent-class"인 요소의 자식 요소 중에서 클래스가 "child-class"인 요소를 선택하고, 해당 요소에 "highlight" 클래스를 추가합니다.