jQuery에서 filter, findIndex, map 활용하기: 다양한 예제와 실전 가이드

jQuery는 DOM 조작과 이벤트 처리를 간단하게 만들어 주는 자바스크립트 라이브러리로, filter, findIndex, map과 같은 메서드는 데이터 처리 및 요소 선택에 강력한 기능을 제공합니다. 이 글에서는 jQuery에서 이 메서드들을 활용하는 다양한 예제와 함께 실전 팁을 자세히 소개합니다.

---

1. filter 메서드 활용

filter 메서드란?

filter 메서드는 jQuery 객체의 요소 중 특정 조건에 부합하는 요소만 선택하여 새로운 jQuery 객체를 반환합니다.

$("selector").filter(function(index, element) {
    return 조건;
});

• index: 현재 요소의 인덱스.
• element: 현재 요소 그 자체.

예제 1: 짝수 번째 요소 선택

$("li").filter(function(index) {
    return index % 2 === 0; // 짝수 인덱스만 반환
}).css("color", "blue");

결과: 짝수 번째 <li> 요소의 글자 색이 파란색으로 변경됩니다.

예제 2: 특정 클래스가 포함된 요소 필터링

$("div").filter(function() {
    return $(this).hasClass("highlight");
}).css("background-color", "yellow");

결과: highlight 클래스가 포함된 <div> 요소의 배경색이 노란색으로 변경됩니다.

예제 3: 입력 필드 중 비어 있는 필드 찾기

$("input").filter(function() {
    return !$(this).val(); // 값이 없는 필드 반환
}).css("border", "1px solid red");

결과: 빈 입력 필드에 빨간 테두리가 추가됩니다.

---

2. findIndex 메서드 활용

jQuery 자체에는 findIndex가 없지만, Array의 findIndex 메서드를 활용하여 유사한 기능을 구현할 수 있습니다.

findIndex란?

findIndex 메서드는 배열 요소 중 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.

array.findIndex(function(element, index, array) {
    return 조건;
});

• element: 배열의 현재 요소.
• index: 현재 요소의 인덱스.
• array: 호출한 배열.

예제 1: 특정 값의 인덱스 찾기

let items = ["apple", "banana", "cherry", "date"];
let index = items.findIndex(function(item) {
    return item === "cherry";
});
console.log(index); // 출력: 2

결과: cherry의 인덱스인 2가 출력됩니다.

예제 2: 조건을 만족하는 첫 번째 요소 찾기

let numbers = [10, 20, 30, 40];
let index = numbers.findIndex(function(num) {
    return num > 25;
});
console.log(index); // 출력: 2

결과: 30이 조건을 만족하므로 인덱스 2가 반환됩니다.

---

3. map 메서드 활용

map 메서드란?

map 메서드는 jQuery 객체의 모든 요소에 대해 콜백을 실행하고, 결과를 배열로 반환합니다.

$("selector").map(function(index, element) {
    return 값;
}).get();

• index: 현재 요소의 인덱스.
• element: 현재 요소 그 자체.
• .get(): jQuery 객체를 배열로 변환.

예제 1: 텍스트 내용 추출

let texts = $("p").map(function() {
    return $(this).text();
}).get();
console.log(texts);

결과: 모든 <p> 요소의 텍스트 내용을 배열로 반환합니다.

예제 2: 특정 속성 값 추출

let srcs = $("img").map(function() {
    return $(this).attr("src");
}).get();
console.log(srcs);

결과: 모든 이미지 요소의 src 속성 값을 배열로 반환합니다.

예제 3: 계산된 값으로 새로운 배열 생성

let adjustedPrices = $(".price").map(function() {
    return parseFloat($(this).text()) * 1.1; // 10% 증가
}).get();
console.log(adjustedPrices);

결과: 모든 가격에 10%를 추가한 배열을 반환합니다.

---

4. 실전 사례: filter, findIndex, map의 조합

사례 1: 조건부 스타일 변경 및 인덱스 반환

let highlightedIndex = $("li").map(function(index, element) {
    if ($(this).hasClass("highlight")) {
        $(this).css("font-weight", "bold");
        return index;
    }
}).get();

console.log(highlightedIndex);

결과: highlight 클래스를 가진 요소의 인덱스가 배열로 반환되며, 해당 요소는 굵은 글씨로 변경됩니다.

사례 2: 데이터 테이블에서 특정 조건의 행 선택

$("tr").filter(function() {
    return parseInt($(this).find(".age").text()) > 30; // 나이가 30 이상인 행 선택
}).css("background-color", "#f0f0f0");

결과: 나이가 30 이상인 행에 회색 배경이 적용됩니다.

---

5. 마무리

jQuery의 filter, findIndex, map 메서드는 데이터 필터링, 변환, 선택 작업에서 강력한 도구로 활용됩니다. 이 메서드들을 조합하면 DOM 요소와 데이터를 효율적으로 처리할 수 있습니다. 이 글의 다양한 예제를 참고하여 실전 프로젝트에 적용해 보세요.