Javascript, jQuery

jQuery foreach ($.each()) 사용법과 다양한 예제

Coop 2025. 3. 16. 21:34

1. jQuery에서 foreach ($.each())란?

jQuery의 $.each() 함수는 배열(Array)이나 객체(Object)의 요소를 반복(iterate)하는 데 사용됩니다.
이를 활용하면 HTML 요소를 동적으로 조작하거나 AJAX로 가져온 데이터를 쉽게 처리할 수 있습니다.

✅ 특징

  • 배열 및 객체 순회(iteration) 가능
  • HTML 요소 반복 처리 가능
  • AJAX 데이터와 함께 사용 가능
  • for 루프보다 간결한 코드

 

2. 기본적인 $.each() 사용법

📌 배열(Array) 반복 예제

1
2
3
4
5
6
var fruits = ['Apple', 'Banana', 'Cherry'];
 
$.each(fruits, function(index, value) {
    console.log(index + ': ' + value);
});
 

 

✅ 결과:

1
2
3
4
0: Apple  
1: Banana  
2: Cherry  
 
 cs

🔹 index에는 배열의 인덱스(0, 1, 2)가 들어가고, value에는 해당 요소 값이 들어갑니다.

 

3. 객체(Object) 반복 예제

1
2
3
4
5
6
7
8
9
10
var user = {
    name: 'Alice',
    age: 25,
    city: 'Seoul'
};
 
$.each(user, function(key, value) {
    console.log(key + ': ' + value);
});
 

 

✅ 결과:

1
2
3
4
name: Alice  
age: 25  
city: Seoul  
 

🔹 key에는 객체의 속성명(name, age, city), value에는 해당 속성값이 들어갑니다.

 

4. HTML 요소 반복 처리

📌 each()를 활용한 리스트 변경 예제

HTML에 있는 <li> 요소의 텍스트를 변경하는 코드입니다.

1
2
3
4
5
6
<ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
 

 

1
2
3
4
5
6
$(document).ready(function() {
    $('.item').each(function(index) {
        $(this).text('Updated Item ' + (index + 1));
    });
});
 

 

✅ 변경 후 결과:

1
2
3
4
Updated Item 1  
Updated Item 2  
Updated Item 3  
 

🔹 $(this)를 사용하여 현재 요소를 선택하고 text()로 값을 변경합니다.

 

5. AJAX 데이터 처리와 $.each()

📌 JSON 데이터 처리 예제

서버에서 가져온 JSON 데이터를 $.each()를 사용하여 화면에 출력하는 예제입니다.

1
2
3
4
5
6
7
8
9
10
$.ajax({
    url: 'data.json', // 서버에서 JSON 데이터 불러오기
    dataType: 'json',
    success: function(response) {
        $.each(response, function(index, item) {
            console.log('ID: ' + item.id + ', Name: ' + item.name);
        });
    }
});
 

 

✅ 예제 JSON 데이터 (data.json)

1
2
3
4
5
6
[
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" },
    { "id": 3, "name": "Charlie" }
]
 

 

✅ 출력 결과:

1
2
3
4
ID: 1, Name: Alice  
ID: 2, Name: Bob  
ID: 3, Name: Charlie  
 

🔹 AJAX를 통해 데이터를 가져온 후, $.each()로 각각의 객체를 반복 처리합니다.

 

6. $.each() vs forEach() 차이점

비교 항목 $.each() forEach()
사용 대상 배열, 객체 배열만 가능
jQuery 요소 선택 가능 ($(this)) 불가능
네이티브 지원 jQuery 필요 순수 JavaScript

📌 forEach() 예제 (비교용)

1
2
3
4
5
var fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(value, index) {
    console.log(index + ': ' + value);
});
 

 

✅ forEach()는 배열 전용이므로, jQuery가 필요 없는 경우 사용하면 좋습니다.

 

7. $.each() 사용 시 주의할 점

✅ 반복문 중단:
return false;를 사용하면 반복문이 즉시 종료됩니다.

1
2
3
4
5
6
7
8
9
var numbers = [10, 20, 30, 40, 50];
 
$.each(numbers, function(index, value) {
    if (value === 30) {
        return false; // 30에서 반복 중단
    }
    console.log(value);
});
 

 

✅ 출력 결과:

1
2
3
10  
20  
 

 

🔹 return false;를 사용하면 break처럼 작동하여 반복이 중단됩니다.

✅ 특정 요소 건너뛰기:
return true;를 사용하면 해당 반복만 건너뜁니다.

1
2
3
4
5
6
7
$.each(numbers, function(index, value) {
    if (value === 30) {
        return true; // 30만 건너뛰고 계속 진행
    }
    console.log(value);
});
 

 

✅ 출력 결과:

1
2
3
4
5
10  
20  
40  
50  
 

 

 

8. 결론 및 요약

✅ $.each() 핵심 정리

  1. 배열 및 객체 반복 가능
  2. HTML 요소 조작 가능 ($(this))
  3. AJAX 데이터 처리에 유용
  4. return false;로 반복 중단 가능
  5. forEach()와 달리 jQuery 요소 활용 가능

🚀 추천 활용 사례

  • 목록 데이터를 동적으로 조작
  • AJAX 데이터 반복 처리
  • HTML 요소 자동 업데이트
  • 사용자 입력 값 순회 및 검증

jQuery의 $.each()를 활용하여 더욱 효율적인 코드를 작성해보세요! 🚀