jQuery 순회 - map() 메서드

jQuery 표준 참조 매뉴얼

예제

表单中所有值的列表를 구축합니다：

$("p").append($("input")).map(function(){})
  return $(this).val();
).get().join(", ") );

직접 테스트해 보세요

정의와 사용법

map()는 각 요소를 현재 일치하는 집합에 함수를 통해 전달하여 반환 값을 포함하는 새로운 jQuery 객체를 생성합니다.

문법

.map(callback(index,domElement))
매개변수 설명
callback(index,domElement) 현재 집합의 각 요소에 대해 호출되는 함수 객체.

상세 설명

반환 값이 jQuery 래핑된 배열이므로, get()를 사용하여 반환된 객체를 처리하여 기본 배열을 얻습니다.

.map() 메서드는 요소 집합의 값을 얻거나 설정하는 데 특히 유용합니다. 다음과 같은 일련의 체크박스를 가진 폼을 생각해 보세요:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

우리는 체크박스 ID로 구성된 쉼표 구분된 목록을 얻을 수 있습니다:

$(':checkbox').map(function() {
  return this.id;
).get().join(',');

직접 테스트해 보세요

이번 호출의 결과는 문자열입니다: "two,four,six,eight".

callback 함수 내부에서 this는 각 반복의 현재 DOM 요소를 참조합니다. 이 함수는 단일 데이터 항목 또는 결과 집합에 추가될 데이터 항목의 배열을 반환할 수 있습니다. 배열을 반환하면 배열 내의 요소가 집합에 추가됩니다. 함수가 null 또는 undefined를 반환하면 어떤 요소도 추가되지 않습니다.

jQuery 표준 참조 매뉴얼