jQuery - $.map()

$.map() 는 객체나 배열의 모든 항목을 받아 콜백 함수에 의해 변경된 새로운 배열을 반환합니다. map() 은 값이 없는 배열에 대해서는 동작하지 않으며, 기존 배열을 변경하지 않습니다.

다만, jQuery 버전 1.6 이하는 Array 만 허용합니다.

$.map( Array, callback(val, index) {
 ... 내용
});

val 은 배열의 값을, index 는 배열의 인덱스 번호를 나타내며, 0부터 카운터합니다.

<script>
$(function(){
 var array = {
  'name': '하보니',
  'age': '20',
  'job': 'IT'
 };


 $.map(array, function(val, index) {

  console.log(array[index]);
  /* 
    결과:
    하보니
    20
    IT
  */

  console.log(val);
  /* 
    결과:
    하보니
    20
    IT
  */
 });
});
</script>

다음은 선택한 요소의 모든 하위 요소를 배열로 반환합니다.

<script>
$(function(){

 var array = $("#use-nth div");

 $.map(array, function(element){

  /* 내용만 배열로 저장하려면 element.textContent 로 정의 */
  console.log(element);
  /* 
    결과:
    <div>알 수 없는 브라우저</div>
    <div>사파리</div>
    <div>크롬</div>
    <div>엣지</div>
    <div>파이어폭스</div>
    <div>익스플러어</div>
    <div>기타</div>
  */
 });
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$.map() 은 반환 값이 있기 때문에 변수에 반환된 배열을 할당할 수 있습니다.

var map = $.map( Array, callback(val, index) {
 ... 내용
});

alert(map);