[JQuery] each()란?

jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다.

each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다.

 

each() 메서드는 다음과 같은 두 가지 타입이 있습니다.

// jQuery 유틸리티 메서드 
$.each(object, function(index, item){ }); 

// jQuery 일반 메서드
$(selector).each(function(index, item){ })

 간략한 설명을 드리겠습니다.

 

$(selector).each(function(index, element))

$('li').each

셀렉터는 앞에 알맞게 본인이 원하는걸 선택하면 되겠습니다.

 

function

반복문 한 바퀴마다 실행될 익명함수입니다.

index

반복문이 몇바퀴 째인지 알 수 있는 인덱스 입니다.

예를 들자면 for 문에서 많이 쓰는 i 의 역활이 되겠네요.

익명함수 내부에서 $(index)로 셀렉트 할 수 있습니다.

사용하지 않을 경우에는 제외하셔도 좋습니다.

element

현재 반복문에서 셀렉트되는 엘리먼트를 나타냅니다.

익명함수 내부에서 $(element)로 셀렉트 할 수 있습니다.

사용하지 않을 경우에는 제외하셔도 좋습니다.

또한 element 대신 this를 사용하셔도 됩니다.

 

<div>
    <span>첫번째</span>
    <span>두번째</span>
    <span>세번째</span>
</div>

 div 안에 span 태그가 3개가 있네요.

우리는 이제 each 함수로 저 span들의 텍스트를 가지고 올겁니다.

 

$('div').find('span').each(function(i, e)
{
    console.log($(this).text());
});



//결과

첫번째

두번째

세번째

//인덱스(i)값
0
1
2

 

여기서 this는 e라고 생각하시면 됩니다.

제일 중요한 요점은 each의 핵심은 selector라는 것입니다.

셀렉터 기준으로 반복하는 것이라는거죠.

 

 

또 다른 예시를 살표보겠습니다. 

$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다.

다시 말해, 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다.

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

그리고 두번째 매개변수로 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖습니다.

다음의 예제를 통해 살펴보도록 합니다.

// 객체을 선언
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 은 배열의 인덱스와 값을 가리키게 됩니다.

 

 

다음의 예제는 배열대신 객체를 전달하는 경우입니다.

 

// 객체를 선언 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 })

 

 

다음과 같은 마크업이 있다고 가정해 봅니다.

 

<ul class="list"> 
	<li>Lorem ipsum dolor sit amet.</li> 
	<li>Lorem ior sit amet.</li> 
	<li>Lorem ipsum </li> 
</ul>

 

$().each() 도 반복문과 비슷합니다.

 

$('.list li').each(function (index, item) { 
// 인덱스는 말 그대로 인덱스
// item 은 해당 선택자인 객체를 나타냅니다.
$(item).addClass('li_0' + index);

// item 과 this는 같아서 일반적으로 this를 많이 사용합니다. 
// $(this).addClass('li_0' + index); 

});

 

 

위 코드를 실행하면 li 의 클래스에 li_00, li_01, li_02 가 추가되어 있을 것입니다.

제이쿼리에 선택자를 넘기면 해당 선택자를 자바스크립트의 반복문과 같이 사용된다고 보면 됩니다.