jQuery를 사용한 요소 탐색과 추가적인 요소 선택(addBack)

jQuery의 find() 메서드는 특정 요소 내에서 하위 요소를 선택하는 데 사용되고, addBack() 메서드는 이전 선택자의 상위 요소도 함께 선택하는 데 사용됩니다. 이 두 가지 메서드를 조합하여 특정 요소 내의 하위 요소를 선택하고 그 상위 요소도 함께 선택할 수 있습니다. 아래 예제를 통해 이러한 메서드의 활용법을 알아보겠습니다.

예제 1: 특정 클래스를 가진 div 내부의 문단(p) 요소와 해당 div 요소 선택하기

$(document).ready(function() {
    $("div.after-addback")
        .find("p") // div 내부의 모든 p 요소 선택
        .addBack() // 이전 선택자(div)도 함께 선택
        .css("color", "blue"); // 선택된 모든 요소의 글꼴 색상을 파란색으로 변경
});

이 예제는 클래스가 "after-addback"인 div 요소 내부의 모든 문단(p) 요소와 해당 div 요소를 선택하여 글꼴 색상을 파란색으로 변경합니다.

예제 2: 복잡한 선택자를 사용하여 요소 선택 및 추가 요소 선택하기

$(document).ready(function() {
    $("div.parent-class")
        .find("span") // div 내부의 모든 span 요소 선택
        .addBack(".parent-class") // 이전 선택자(div)와 해당 클래스(parent-class)도 함께 선택
        .addClass("highlight"); // 선택된 모든 요소에 highlight 클래스 추가
});

이 예제는 클래스가 "parent-class"인 div 요소 내부의 모든 span 요소와 해당 div 요소를 선택하여 highlight 클래스를 추가합니다.

예제 3: 다중 요소 선택 후 이전 선택자와 함께 선택하기

$(document).ready(function() {
    $("div.parent-class")
        .find("span, p") // div 내부의 모든 span과 p 요소 선택
        .addBack(".parent-class") // 이전 선택자(div)와 해당 클래스(parent-class)도 함께 선택
        .css("font-weight", "bold"); // 선택된 모든 요소의 글꼴 두껍게 설정
});

이 예제는 클래스가 "parent-class"인 div 요소 내부의 모든 span과 p 요소를 선택하여 글꼴을 두꺼워지게 설정하고, 이전 선택자와 해당 클래스도 함께 선택합니다.