[ JQuery ] each, forEach

$.each()

제이쿼리에서 반복문을 수행하기 위한 것으로 each 함수가 있다.
선택한 요소 각각에 대하여 for문처럼 요소들을 반복 수행

• jQuery 유틸리티 메서드

$.each(object, function(index, item){});

*객체와 배열 모두 사용 가능

• jQuery 일반 메서드

$(selector).each(function(index, item){})

*return false를 사용하여 반복을 중지시킬 수 있다

.each(function(index,element))
1. function
반복문이 한 바퀴마다 실행될 익명함수
2. index
현재 반복문의 횟수를 알 수 있는 인덱스 i 라고 생각
3. element
현재 반복문에서 셀렉트되는 엘리먼트 e이며 익명함수 내에서 $(element)로 셀렉트 할 수 있다.
제외 가능하며 element 대신 this 사용 가능

• $('div').each
  .each 앞에 셀렉터를 정의할 수 있다.

• $.each() 메서드는 object와 배열 모두에서 사용할 수 있는 반복 함수

• length 속성을 갖는 배열과 유사 배열 객체들(ex, 함수의 인수 객체)을 index 기준으로 반복할 수 있음

• 첫 번째 매개변수는 배열이나 객체를 받고, 두 번째 매개변수는 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 받음

$.each()함수는 크게 세가지 방법으로 사용이 가능

$.each( array, callback );
$.each( object, callback );
$(selector).(callback);

배열 반복하기

• each()함수의 첫번째 인자로 배열을 넣고 두번째에는 각 요소를 순회할때마다 실행될 callback함수(function)를 인자로 주면 됩니다.
• each()함수는 배열을 0번 index 요소부터 한번씩 순회할때마다 callback 함수를 실행하는데, 이때 각 요소의 index를 callback함수의 첫번째 인자로, 요소의 값을 두번째 인자로 넘겨줍니다.

var arr = [ 1, 10, 7, 9, 5 ];
 
$.each(arr, function(index, value) {
      console.log(index + " : " + value);
});

실행 결과는 아래와 같습니다.
배열을 곧바로 인자로 넘겨도 됩니다.

$.each([ 1, 10, 7, 9, 5 ], function(index, value) {
      console.log(index + " : " + value);
});

좀 더 보기 편하게 코딩을 해보자면 아래와 같이 배열과 callback 함수를 각각 넘길수도 있으며 결과는 동일합니다.

var arr = [ 1, 10, 7, 9, 5 ];
var callback = function(index, value) {
      console.log(index + " : " + value);
};
 
$.each(arr, callback);

배열에 각 요소가 무엇이든 상관없이 each()로 반복이 가능합니다.

var arr = [
      {
            name : "kim",
            age : 10
      },{
            name : "lee",
            age : 13
      },{
            name : "park",
            age : 5
      }
];

 
$.each(arr, function(index, obj) {
      console.log(index);
      console.log("name : " + obj.name);
      console.log("age : " + obj.age);
});

실행결과는 아래와 같습니다.

Map 또는 객체 반복하기

$.each()함수에 반복 대상을 배열이 아닌 객체나 Map등으로 지정하는 경우에는 객체의 모든 멤버(속성, 함수, 메서드)를 반복하여 순회합니다.

var obj = {
            name : "kim",
            age : "29",
            hello : function(){
                  console.log('hello world');
            }
};
 
$.each(obj, function(attrName, attrValue) {
      console.log("attrName : " + attrName);
      console.log("attrValue : " + attrValue);
});

특정 객체의 모든 속성이나 Map의 모든 요소들을 반복하고 싶을때 유용하게 사용됩니다.

[제이쿼리]jQuery each (jQuery 반복문)
[javascript] $.each(), some, forEach 알고 사용하자
jQuery.each()
[JQUERY] 제이쿼리 $.EACH() 함수 100% 활용하기!