jQuery $.each() 함수 100% 활용하기!
jQuery의 $.each() 함수는 배열의 요소나 Map 또는 객체의 속성을 반복할 수 있도록 하는 함수입니다. 개인적으로 매우매우 자주 사용하는 함수이기도 합니다. jQuery뿐만 아니라 underscoreJS같은 자바스크립트 유틸리티 라이브러리들에도 쉽게 볼 수 있는 함수(사용법은 라이브러리마다 다를 수있음)입니다.

기본적인 javascript의 for문과의 차이점이라면 for문에는 조건식에 배열의 length만큼의 범위 지정을 해주어야 하고 증감식을 매번 써주어야 하는데에 반해 each()는 이러한 조건을 써주지 않아도 되기 때문에 코드를 더 보기 편하고 배열 뿐만 아니라 DOM 객체나 일반 객체 등에도 사용이 가능하다는 점이 있습니다.


$.each()함수는 크게 세가지 방법으로 사용이 가능합니다.
$.each( array, callback );
$.each( object, callback );
$(selector).(callback);
cs





배열 반복하기
each()함수의 첫번째 인자로 배열을 넣고 두번째에는 각 요소를 순회할때마다 실행될 callback함수(function)를 인자로 주면 됩니다. each()함수는 배열을 0번 index 요소부터 한번씩 순회할때마다 callback 함수를 실행하는데, 이때 각 요소의 indexcallback함수의 첫번째 인자로, 요소의 값을 두번째 인자로 넘겨줍니다.
var arr = [ 110795 ];
 
$.each(arr, function(index, value) {
      console.log(index + " : " + value);
});
cs


실행 결과는 아래와 같습니다.



배열을 곧바로 인자로 넘겨도 됩니다.
$.each([ 110795 ], function(index, value) {
      console.log(index + " : " + value);
});
cs


좀 더 보기 편하게 코딩을 해보자면 아래와 같이 배열과 callback 함수를 각각 넘길수도 있으며 결과는 동일합니다.
var arr = [ 110795 ];
var callback = function(index, value) {
      console.log(index + " : " + value);
};
 
$.each(arr, callback);
cs


배열에 각 요소가 무엇이든 상관없이 each()로 반복이 가능합니다.
var arr = [
      {
            name : "kim",
            age : 10
      },{
            name : "lee",
            age : 13
      },{
            name : "park",
            age : 5
      }
];
 
$.each(arr, function(index, obj) {
      console.log(index);
      console.log("name : " + obj.name);
      console.log("age : " + obj.age);
});
cs


실행결과는 아래와 같습니다.







Map 또는 객체 반복하기
$.each()함수에 반복 대상을 배열이 아닌 객체나 Map등으로 지정하는 경우에는 객체의 모든 멤버(속성, 함수, 메서드)를 반복하여 순회합니다.
var obj = {
            name : "kim",
            age : "29",
            hello : function(){
                  console.log('hello world');
            }
};
 
$.each(obj, function(attrName, attrValue) {
      console.log("attrName : " + attrName);
      console.log("attrValue : " + attrValue);
});
cs


특정 객체의 모든 속성이나 Map의 모든 요소들을 반복하고 싶을때 유용하게 사용됩니다.







Selector로 얻은 DOM 객체 반복하기
jQquery Selector로 DOM 객체를 얻음과 동시에 반복을 수행할 수 있습니다. 아래 코드는 html상의 모든 span태그를 selector로 잡아서 each()를 실행하는 모습입니다. callback으로 넘어오는 item은 jQuery 객체가 아닌 순수한 javascript의 DOM 객체이므로 jQuery 함수를 사용하고 싶다면 jQuery로 한번 잡아줘야 합니다.
<!DOCTYPE html>
<html>
<head>
      <script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
      <span>1</span>
      <span>5</span>
      <span>10</span>
      <span>7</span>
      <span>30</span>
      
<script>
      $('span').each(function(index, item){
            var text = $(item).text();
            console.log(text);
      });
</script>
</body>
</html>
cs


실행결과입니다.



다음글



블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!

  • hello 2020.06.19 17:36  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 ~ 죄송한데 혹시 배열이
    var arr = [
    {
    name : "lee",
    age : 10
    },{
    name : "lee",
    age : 13
    },{
    name : "park",
    age : 5
    }
    ];
    이렇게 생겼을때 each로 돌리고 name이 값은 값일 경우 age를 더하는 방법도 있을까요?! ㅠㅠ