[jQuery] forEach 와 each 사용법과 다양한 예제

forEach는 자바스크립트에서 배열을 반복 처리할 때 많이 사용되는 메서드입니다. 하지만 jQuery에서도 비슷한 방식으로 배열이나 객체를 반복 처리할 수 있는 기능이 제공됩니다. 이번 글에서는 jQuery의 반복 처리를 돕는 .each() 메서드를 중심으로 다양한 예제를 살펴보겠습니다.

---

jQuery에서 forEach와 .each()의 차이점

기본적으로, forEach는 자바스크립트 배열의 메서드입니다. 반면, jQuery의 .each() 메서드는 배열뿐만 아니라 객체나 DOM 요소에도 사용할 수 있어 보다 유연합니다.

기본 문법

JavaScript의 forEach

let arr = [1, 2, 3];
arr.forEach(function(value, index) {
    console.log(`인덱스: ${index}, 값: ${value}`);
});

 

jQuery의 .each()

let arr = [1, 2, 3];
$.each(arr, function(index, value) {
    console.log(`인덱스: ${index}, 값: ${value}`);
});

---

jQuery .each()의 다양한 예제

1. 배열 반복 처리

jQuery의 .each()로 배열을 순회하며 값을 출력하는 기본 예제입니다.

let fruits = ['apple', 'banana', 'cherry'];
$.each(fruits, function(index, value) {
    console.log(`${index}번째 과일: ${value}`);
});

 

2. 객체 반복 처리

객체의 키와 값을 반복 처리할 때도 .each()를 사용할 수 있습니다.

let person = { name: 'John', age: 30, city: 'New York' };
$.each(person, function(key, value) {
    console.log(`${key}: ${value}`);
});

 

3. jQuery 객체의 DOM 요소 순회

jQuery로 선택한 DOM 요소를 순회하며 원하는 작업을 수행할 수 있습니다.

$('li').each(function(index, element) {
    console.log(`인덱스 ${index}: ${$(element).text()}`);
});

 

4. 중간에 반복 종료하기

return false;를 사용하면 .each() 루프를 조기에 종료할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value) {
    if (value > 3) {
        return false; // 루프 종료
    }
    console.log(value);
});

 

5. 중간에 특정 항목만 건너뛰기

return true;를 사용하면 특정 항목만 건너뛸 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value) {
    if (value % 2 === 0) {
        return true; // 짝수 건너뛰기
    }
    console.log(value);
});

 

---

응용 예제: HTML에서 데이터 다루기

HTML에서 데이터 속성을 읽어와 작업하는 데도 .each()를 활용할 수 있습니다.

<ul>
    <li data-price="100">Item 1</li>
    <li data-price="200">Item 2</li>
    <li data-price="300">Item 3</li>
</ul>

$('li').each(function(index, element) {
    let price = $(element).data('price');
    console.log(`Item ${index + 1}의 가격: ${price}`);
});

 

---