본문 바로가기
Web/jQuery

[jQuery] $.each() 메소드

by 준토리73 2021. 1. 20.

$.each() 메소드 : jQuery에서 배열을 관리하는 목적

- 반복문과 같이 배열이나 객체의 요소를 검사할 수 있음 

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

jQuery에 선택자를 넘기면 해당 선택자를 js 반복문과 같이 사용되는 것! 

 

  • 배열을 전달
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 
})
 

 

  • 객체를 전달 
// 객체를 선언 
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 
 
}

댓글