.each()

jQuery Reference

.each()는 선택한 요소마다 함수를 한 번씩 실행합니다. 함수에는 0부터 시작하는 인덱스와 DOM 요소가 전달되며, return false로 반복을 중단할 수 있습니다.

문법과 적용 범위

$(".item").each(function (index, element) {
  // this와 element는 현재 DOM 요소입니다.
});

콜백의 this는 jQuery 객체가 아니라 DOM 요소이므로 jQuery 메서드를 쓰려면 $(this)로 감쌉니다. 일반 함수의 this와 화살표 함수의 this는 다르므로, 화살표 함수에서는 전달된 element를 사용하는 편이 분명합니다. .each() 자체는 원래 jQuery 객체를 반환하며, 콜백에서 반환한 값들을 배열로 모으지 않습니다. 결과 배열이 필요하면 .map().get()을 검토하세요.

jQuery 공식 문서의 .each() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery each 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<ul><li class="item">첫째</li><li class="item">둘째</li><li class="item">셋째</li></ul>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const visited = [];
      $(".item").each(function (index, element) {
        $(element).addClass("marked");
        visited.push(index + ":" + $(this).text());
        if (index === 1) { return false; }
      });
      $("#output").text(visited.join(" / "));
    });
  </script>
</body>
</html>

실행 결과 확인

첫째와 둘째만 강조되고 결과는 0:첫째 / 1:둘째입니다. 인덱스 1의 작업까지 수행한 뒤 false를 반환하므로 셋째는 처리되지 않습니다.

화살표 함수에서는 element 사용하기

$(".item").each((index, element) => {
  $(element).attr("data-index", index);
});

이 예제는 모든 항목에 0, 1, 2의 data-index를 설정합니다. 바깥 스코프의 this에 의존하지 않으므로 일반 함수 예제와 혼동하지 않습니다.

사용할 때 주의할 점

현재 항목만 건너뛰려면 그 항목의 작업 전에 return을 사용하세요. return false는 다음 항목들까지 모두 중단합니다.
.addClass() 같은 설정 메서드는 원래 선택한 모든 요소에 적용됩니다. 같은 클래스만 붙이려는 경우 .each()로 다시 감쌀 필요가 없습니다.
$.each(배열, 함수)는 일반 배열·객체를 순회하는 별도 API입니다. 요소 집합의 .each()와 구분하세요.
async 콜백을 전달해도 .each()가 비동기 작업의 완료를 기다리지 않습니다. 순차 완료가 필요하면 별도의 for...of와 await 등을 사용해야 합니다.

용도를 비교하려면 .addClass()의 전체 집합 적용을 참고하세요.

jQuery Reference