[jquery] $.each(), $().each() 메소드 정의

$.each() 메소드 : 2 type

---

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

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

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

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

each() 메소드는 위와 같은 두 가지가 있습니다.

$.each() 메소드 : 설명

---

$.each() 메소드는 객체와(Object) 배열(Array) 모두에서 사용할 수 있는 일반적인 반복 함수입니다. 다시 말해, 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다.

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

---

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

---

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 
})

---

$().each()

---

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

---

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

위와 같은 html 코드가 짜여져 있다고 가정해봅시다.

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

	// 인덱스는 말 그대로 인덱스 
	// item 은 해당 선택자인 객체를 나타냅니다. 

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

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

});

그리고 $().each()를 사용하면, list 클래스 안에 있는 li 태그안에 클래스가 addClass('li_0' + index) 값으로 들어가게 됩니다.

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

위와 같이 li_00, li_01, li_02으로 추가됨을 알 수 있습니다.

---

출처: https://webclub.tistory.com/455 [Web Club]