[JavaScript] $.each() 사용법 정리

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

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

 

each() 메서드는 두 가지 타입으로 구성이 되는데, 다음과 같다. (출처: https://webclub.tistory.com/455 [Web Club])

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

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

 

 

첫 번째로 사용되는 $.each() 메서드는 object와 배열 모두에서 사용할 수 있는 일반적인 반복 함수이다.

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

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

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

 

두 번째로 사용되는 타입은 다음과 같은 방식으로 배열 대신 객체를 전달하는 경우이다.

// 객체를 선언 
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()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행시키는 메서드이다.

 

이에 대해 참고하기 좋으며 정리가 잘되어 있는 블로그 2개를 첨부하였다.

 

https://www.codingfactory.net/10312

jQuery / Method / .each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드

https://2ham-s.tistory.com/282

[JQuery] each()란?