jQuery를 사용한 body 요소 내의 세 번째 div 요소 선택하기

jQuery의 find() 메서드를 사용하면 특정 요소 내에서 하위 요소를 찾을 수 있습니다. eq() 메서드는 선택한 요소 집합에서 특정 인덱스에 해당하는 요소를 선택하는 데 사용됩니다. 아래 예제를 통해 find()와 eq() 메서드를 조합하여 body 요소 내의 세 번째 div 요소를 선택하는 방법을 알아보겠습니다.

예제 1: body 요소 내의 세 번째 div 요소 선택하기

$(document).ready(function() {
    var thirdDiv = $("body").find("div").eq(2);
    thirdDiv.css("border", "2px solid red");
});

이 예제는 페이지에서 body 요소 내의 모든 div 요소를 찾고, 그 중에서 세 번째 div 요소를 선택하여 해당 요소의 테두리를 빨간색으로 설정합니다.

예제 2: 특정 클래스를 가진 div 요소 중에서 세 번째 요소 선택하기

$(document).ready(function() {
    var thirdDivWithClass = $("body").find("div.special").eq(2);
    thirdDivWithClass.addClass("highlight");
});

이 예제는 body 요소 내에서 클래스가 "special"인 div 요소를 찾고, 그 중에서 세 번째 요소를 선택하여 해당 요소에 "highlight" 클래스를 추가합니다.

예제 3: 특정 ID를 가진 div 요소 내의 세 번째 하위 요소 선택하기

$(document).ready(function() {
    var thirdSubElement = $("body").find("#container").eq(0).find("div").eq(2);
    thirdSubElement.fadeOut();
});

이 예제는 body 요소 내에서 ID가 "container"인 div 요소를 찾고, 그 하위에서 세 번째 div 요소를 선택하여 해당 요소를 서서히 페이드아웃 처리합니다.