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 요소와 데이터를 효율적으로 처리할 수 있습니다. 이 글의 다양한 예제를 참고하여 실전 프로젝트에 적용해 보세요.
'개발 > Javascript' 카테고리의 다른 글
| jQuery에서 셀렉터 사용법: 다양한 선택 방법과 예제 (0) | 2025.01.23 |
|---|---|
| JavaScript로 동적 테이블 생성: rowspan, colspan 구현 가이드 (1) | 2025.01.22 |
| JavaScript에서 `setInterval`과 `setTimeout` 사용법과 예제 (1) | 2025.01.20 |
| 다양한 차트 라이브러리를 활용한 차트 구현 예제 (1) | 2025.01.20 |
| FusionCharts로 다양한 차트 그리기: 예제와 상세 설명 (0) | 2025.01.20 |