jQuery를 사용한 요소 내의 하위 요소 찾기와 원래 선택자로 돌아오기

jQuery의 find() 메서드는 선택한 요소 내에서 하위 요소를 찾는 데 사용됩니다. 그리고 end() 메서드는 이전에 선택한 요소 집합으로 돌아가는 데 사용됩니다. 이 두 가지 메서드를 함께 사용하여 요소 내에서 하위 요소를 찾고 다시 원래 선택자로 돌아오는 방법을 알아보겠습니다.

예제 1: 문단(p) 요소 내의 모든 span 요소 찾기

$(document).ready(function() {
    $("p")
        .find("span") // p 요소 내의 모든 span 요소 찾기
        .css("color", "red") // 찾은 모든 span 요소의 글꼴 색상을 빨간색으로 변경
        .end(); // 다시 원래 선택자(p)로 돌아오기
});

이 예제는 페이지에서 모든 문단(p) 요소 내의 모든 span 요소를 찾고, 해당 span 요소의 글꼴 색상을 빨간색으로 변경한 후 원래 선택자인 p 요소로 돌아갑니다.

예제 2: 특정 클래스를 가진 div 내부의 모든 a 요소 찾기

$(document).ready(function() {
    $(".parent-div")
        .find("a") // parent-div 클래스를 가진 div 요소 내의 모든 a 요소 찾기
        .addClass("highlight") // 찾은 모든 a 요소에 highlight 클래스 추가
        .end(); // 다시 원래 선택자(.parent-div)로 돌아오기
});

이 예제는 클래스가 "parent-div"인 div 요소 내의 모든 a 요소를 찾고, 해당 a 요소에 highlight 클래스를 추가한 후 원래 선택자인 .parent-div로 돌아갑니다.

예제 3: 특정 ID를 가진 요소 내의 하위 요소 찾기

$(document).ready(function() {
    $("#container")
        .find("input[type='text']") // container ID를 가진 요소 내의 모든 텍스트 입력 필드 찾기
        .prop("disabled", true) // 찾은 모든 텍스트 입력 필드를 비활성화
        .end(); // 다시 원래 선택자(#container)로 돌아오기
});

이 예제는 ID가 "container"인 요소 내의 모든 텍스트 입력 필드를 찾고, 해당 입력 필드를 비활성화한 후 원래 선택자인 #container로 돌아갑니다.