jQuery를 사용한 특정 클래스를 필터링한 div 요소의 배경색 변경하기

jQuery의 filter() 메서드를 사용하면 선택한 요소 집합 중에서 특정 클래스를 필터링할 수 있습니다. 이를 활용하여 div 요소를 선택한 후에 특정 클래스를 필터링하여 조작할 수 있습니다. 아래 예제를 통해 filter() 메서드를 사용하여 div 요소의 배경색을 변경하는 방법을 알아보겠습니다.

예제 1: 모든 div 요소의 배경색을 변경하고 중간에 있는 요소만 필터링하기

$(document).ready(function() {
    $("div")
        .css("background", "#c8ebcc") // 모든 div 요소의 배경색을 녹색으로 변경
        .filter(".middle") // middle 클래스를 가진 요소만 필터링
        .css("background", "#ffcc00"); // 중간에 있는 요소의 배경색을 노란색으로 변경
});

이 예제는 페이지에서 모든 div 요소의 배경색을 라임색(#c8ebcc)으로 변경한 후에, 그 중에서 클래스가 "middle"인 요소만 필터링하여 배경색을 노란색(#ffcc00)으로 변경합니다.

예제 2: 특정 조건에 따라 div 요소 필터링하여 스타일 변경하기

$(document).ready(function() {
    $("div")
        .css("background", "#c8ebcc") // 모든 div 요소의 배경색을 라임색으로 변경
        .filter(function(index) {
            return index % 2 === 0; // 짝수 인덱스를 가진 요소만 필터링
        })
        .css("color", "blue"); // 짝수 번째 요소의 글꼴 색상을 파란색으로 변경
});

이 예제는 페이지에서 모든 div 요소의 배경색을 라임색(#c8ebcc)으로 변경한 후에, 인덱스가 짝수인 요소만 필터링하여 해당 요소의 글꼴 색상을 파란색으로 변경합니다.