본문 바로가기

Frontend/jQuery

JS jQuery (part. 05) - 배열 관리

jQuery로 배열을 관리할 때는 each( ) 메서드를 사용한다

each( ) 메서드는 매개변수로 입력한 함수를 통해 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드이다

 

each( ) 메서드는 다음과 같이 두 가지 형태로 사용한다

$.each(object, function(index, item){})
$(selector).each(function(index, item){})

$(function () {
  var array = [
    { name: 'Hanbit Media', link: 'http://hanbit.co.kr' },
    { name: 'Naver', link: 'http://naver.com' },
    { name: 'Daum', link: 'http://daum.net' }
  ]

  $.each(array, function (index, item) {
    var output = '';

    output += '<a href="' + item.link + '">';
    output += '    <h1>' + item.name + '</h1>';
    output += '</a>';

    document.body.innerHTML += output;
  });
});

index : 배열의 인덱스 또는 객체의 키

item : 인덱스나 키가 가진 값

 

Ajax 사용시 $.each() 형태 메서드를 굉장히 많이 사용한다

 

ECMAScript 5의 forEach() 메서드와 차이점

[].forEach(function(item, index){});

$.each(function(index, item){});

// 매개변수의 순서가 다르다