.each() 메서드

.each()

jQuery 객체 배열에는 검색된 여러 개의 요소(Element)가 저장되어 있다.
선택자에 의해 선택된 요소가 하나뿐이거나 없더라도 일단은 배열이다. 배열에 저장된 요소들을 각각에 대해 개별적인 처리를 하고 싶다면 배열을 순회하며 모든 요소를 하나씩 꺼내야 한다.
이때 사용하는 메서드가 바로 .each() 문이다.

each문 형식

each(function(index, item) {})

인수로 콜백 함수 하나를 전달받으며 배열 내의 모든 엘리먼트에 대해 이 콜백을 호출한다. 함수로 전달되는 index 인수는 배열내의 요소의 순서값이고 item은 요소이다. 콜백에서는 배열의 각 항목을 전달받아 원하는 작업을 수행한다. 아래 간단한 예제를 통해 확인해 봅시다.

예제1

  <ul>
 	<li>One-Element</ll>
 	<li>Two-Element</ll>
   </ul>

   <script type="text/javascript">
 	$('li').each(function(index){
 		alert(index + ' , ' + this.text());
   	});
   </script>

   // 0 , One-Element   (index는 0부터 시작하는 것을 알 수 있다.)
   //  1 , Two-Element  (존재하는 </li>들을 반복하면서 text만을 가져오도록 한 것)
   

▲ li 요소를 찾아 index와 그 요소의 text 값을 보여주는 예제이다.

함수 내부에서 항목은 item 인수로 참조하되 이 인수로 전달되는 값은 jQuery 객체가 아니라 DOM 객체이다. 따라서 jQuery 메서드를 호출하려면 $(item)으로 래핑해야 한다.

예제2

Value 1	Value 2	Value 3	Value 4	Value 5
-32,531	20,000	15,321	-24,200	1,000
-2,531	6,200	10,333	20,200	152,000
9,531	-9,103	1,331	2,200	15,000
12,531	-2,020	-321	44,240	18,910

1. (-)부호가 붙은 숫자는 (-)부호 대신 ▼와 빨간색으로 색상 변경
2. 나머지 숫자들은 ▲과 초록색으로 색상 변경

소스코드

   $("td").each(function(){
		if($(this).text().indexOf('-') > -1){
			$(this).text($(this).text().replace('-','▼'));
			$(this).css("color","#de1951");
		}else{
			$(this).prepend('▲');
			$(this).css("color","#1c8c7e");
		}
   })

   // 만일 특정한 칸만 바뀌길 원한다면 <td> 태그에 name속성(ex.name="test") 지정 후 $("td") 대신 $("td[name="test"]")로 한다면 name 속성을 준 곳만 적용된다.
   // .each() 메서드는 많이 사용되므로, 꼭 습득하여 유연하게 사용 가능하도록 하면 좋을 것이다.

each의 인수로 전달된 콜백 함수는 매 요소마다 호출되므로 이 함수 내에서 this는 호출되는 요소와 같다.
그래서 함수 내부에서 객체를 참조할 때 item 인수 대신 this 키워드를 사용해도 효과는 동일하다.
허나 this로도 요소를 참조할 수 있는데 굳이 item 인수를 콜백으로 전달하는 이유는 무엇일까?
그것은 바로 this는 문맥에 따라 의미가 바뀔 수 있기 때문이다.
콜백에서 또 다른 함수를 호출하면 이 함수 안에서는 this의 의미가 달라질 수 있으므로 item 인수를 별도로 전달하는 편이 더 낫다.
가급적이면 문맥에 상관없이 사용할 수 있는 item 인수를 사용하는 것이 더 안전하다.