[JavaScript] each 함수 사용법 ~$.each()~(제이쿼리 포문 반복문 배열 이치)_jQuery _-how to use each function-++

each() : 

jQuery를 사용해 배열을 관리하고자 할 때 each() 함수를 사용할 수 있다.

each() 함수는 매개변수로 전달 받은 값을 사용해 for in 반복문 처럼 배열이나 객체의 요소를 검사 할 수 있는 함수.

each() 함수 : 2가지 종류

// 1.jQuery 유틸리티 함수 

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

// 2.jQuery selector 함수 

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

1. $.each()

object, 배열 모두에서 사용 할 수 있는 일반적인 반복함수.

배열, length 속성을 갖는 배열, 유사 배열 객체들을 index 기준으로 반복 가능.

첫번째 매개변수로 배열이나 객체를 받음. 

두번째 매개변수로 콜백함수를 받고, 콜백함수의 인자에는 인덱스와 값을 받음

*예제1-1 : 배열일 경우 

// 배열 선언

var arr= [ 

{title : '다음', url : 'http://daum.net'}, 

{title : '네이버', url : 'http://naver.com'} 

]; 

// $.each() 메서드의 첫번째 매개변수로 위에서 선언한 배열을 전달 

$.each(arr, function (index, item) { 

// 두 번째 매개변수는 콜백함수. 콜백함수의 매개변수 중 

// *첫 번째 index는 배열의 인덱스 또는 객체의 키를 의미하고 

// *두 번째 매개 변수 item은 해당 인덱스나 키가 가진 값을 의미합니다. 

var result = ''; 

result += index +' : ' + item.title + ', ' + item.url; 

console.log(result); 

// 결과

// 0 : 다음, http://daum.net 

// 1 : 네이버, http://naver.com 

})

정리 : 첫 번째 매개변수에 배열을 받음 >> 콜백함수의 index, item 는 받은 배열의 인덱스와 값을 가리킴

*예제1-2 : 객체일 경우

// 객체를 선언 

var obj = { 

daum: 'http://daum.net'

, naver: 'http://naver.com' 

}; 

// $.each() 메서드의 첫번째 매개변수로 위에서 선언한 객체를 전달 

$.each(obj, function (index, item) { 

// 객체를 전달받으면 index는 객체의 key(property)를 가리킴.

// item은 키의 값을 가져옴.

var result = ''; 

result += index + ' : ' + item; 

console.log(result); 

// 결과

// daum : http://daum.net 

// naver : http://naver.com 

})

정리 : 첫 번째 매개변수에 객체를 받음 >> 콜백함수의 index, item 는 받은 객체의 key(property)와 key값을 가리킴

2. $().each()

*예제2-1 : 셀렉터 사용법

<ul class="list"> 

<li>Lorem ipsum dolor sit amet.</li> 

<li>Lorem ior sit amet.</li> 

<li>Lorem ipsum </li> 

</ul>

$('.list li').each(function (index, item) { 

// 인덱스는 각개별 순번 

// item 은 해당 선택자인 객체를 나타냄. 

$(item).addClass('li_0' + index); 

// item 과 this는 같아서 일반적으로 this를 많이 사용. 

// $(this).addClass('li_0' + index); 

//결과 

각li들에 class="li_0[0~2]" 가 부여됨

});

정리 : 같은셀렉터들은 각각 개별 순번(index)을 부여받고, item은 해당 순번의 셀렉터 자신이됨 (제이쿼리에 선택자를 넘기면 해당 선택자를 자바스크립트의 반복문과 같이 사용된다고 보면 됨.)

출처: https://webclub.tistory.com/455