jQuery의 자식 선택자 (“부모 > 자식”)

jQuery의 자식 선택자인 (“부모 > 자식”)는 특정 부모 요소의 직계 자식 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 구조에서 특정한 깊이에 있는 요소를 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 직계 자식 요소 선택하기

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

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

이 예제는 클래스가 "parent"인 요소의 직계 자식 요소 중에서 클래스가 "child"인 요소를 선택하여 "highlight" 클래스를 추가합니다.

예제 2: 특정 폼 안의 직계 자식 요소 선택하기

<form id="myForm">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username">
    <label for="password">비밀번호:</label>
    <input type="password" id="password">
</form>

$("#myForm > label").addClass("form-label");

이 예제는 ID가 "myForm"인 폼 요소의 직계 자식 요소 중에서 label 요소를 선택하여 "form-label" 클래스를 추가합니다.

예제 3: 리스트의 직계 자식 항목 선택하기

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

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

이 예제는 클래스가 "menu"인 ul 요소의 직계 자식 li 요소를 선택하여 "menu-item" 클래스를 추가합니다.

jQuery의 자식 선택자를 활용하면 HTML 구조에서 특정한 깊이에 있는 요소를 쉽게 선택하여 조작할 수 있습니다.