jQuery의 후손 선택자 (“상위요소 하위요소”)

jQuery의 후손 선택자인 (“상위요소 하위요소”)는 상위 요소의 하위에 있는 모든 하위 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 구조에서 특정한 상위 요소 아래에 있는 하위 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 상위 요소의 모든 하위 요소 선택하기

<div class="parent">
    <div class="child">자식 요소 1</div>
    <div class="child">자식 요소 2</div>
    <div class="child">자식 요소 3</div>
</div>

$(".parent .child").addClass("highlight");

이 예제는 클래스가 "parent"인 상위 요소 아래에 있는 모든 클래스가 "child"인 하위 요소를 선택하여 "highlight" 클래스를 추가합니다.

예제 2: 특정 폼 안에 있는 모든 입력 요소 선택하기

<form id="myForm">
    <input type="text" id="username" placeholder="사용자 이름">
    <input type="email" id="email" placeholder="이메일">
    <input type="password" id="password" placeholder="비밀번호">
</form>

$("#myForm input").addClass("form-input");

이 예제는 ID가 "myForm"인 폼 요소 아래에 있는 모든 입력 요소를 선택하여 "form-input" 클래스를 추가합니다.

예제 3: 특정 리스트 안에 있는 모든 리스트 아이템 선택하기

<ul class="menu">
    <li>메뉴 항목 1</li>
    <li>메뉴 항목 2</li>
    <li>메뉴 항목 3</li>
</ul>

$(".menu li").addClass("menu-item");

이 예제는 클래스가 "menu"인 리스트 요소 아래에 있는 모든 리스트 아이템을 선택하여 "menu-item" 클래스를 추가합니다.

jQuery의 후손 선택자를 활용하면 HTML 구조에서 특정한 상위 요소 아래에 있는 모든 하위 요소를 쉽게 선택하여 조작할 수 있습니다.