jQuery $(selector).each() 이용한 DOM 객체 반복 함수

jQuery의 each() 함수는 Selector로 얻은 DOM 객체를 반복 처리할 때 매우 강력하고 유연한 도구입니다.

아래는 each() 함수의 동작 원리, 사용 방법, DOM 객체를 다루는 구체적인 사례를 정리한 내용입니다.

---

jQuery each() 함수로 DOM 객체 반복하기

기본 개념

jQuery의 each() 메서드는 선택한 DOM 요소들을 순회하면서 각 요소에 대해 원하는 작업을

수행할 수 있도록 해줍니다.

each() 메서드의 기본 구문

each() 메서드는 아래와 같은 형식으로 사용됩니다.

  $(selector).each(function(index, element) {
  	// 처리 로직
  });

• index: 현재 요소의 인덱스 (0부터 시작)
• element: 순수한 JavaScript DOM 객체

element를 jQuery 메서드로 활용하려면 $(element) 또는 $(this)를 사용해야 합니다.

---

반복 처리 예제

간단한 텍스트 출력

다음은 모든 <span> 요소의 텍스트를 출력하는 예제입니다.

$('#contentsArea div span').each(function(index, element) {
  console.log(`index ${index} : ${$(element).text()}`);
});

클래스 추가

선택된 요소들에 새 클래스를 추가하는 방법은 다음과 같습니다.

$('#contentsArea div span').each(function() {
  $(this).addClass('highlighted');
});

 

반복 중단

each() 메서드 내에서 특정 조건에 따라 반복을 중단하려면 return false를 사용합니다.

$('#contentsArea ul li').each(function(index, item) {
  if (index === 3) {
    return false; // 반복 종료
  }
  console.log($(item).text());
});

---

콜백 함수에서의 활용 예

each() 내부에서 복잡한 작업을 수행하려면 콜백 함수 내 로직을 적절히 구성할 수 있습니다.

속성 변경

모든 이미지의 src 속성을 변경하는 예제

$('#contentsArea img').each(function() {
  const newSrc = $(this).data('new-src'); // data-* 속성 사용
  $(this).attr('src', newSrc);
});

특정 요소만 처리

조건에 따라 특정 요소만 작업하는 방법

$('#contentsArea p').each(function() {
  if ($(this).hasClass('important')) {
    $(this).css('font-weight', 'bold');
  }
});

체크박스 상태 확인

선택된 체크박스의 값을 배열로 가져오기

const selectedValues = [];
$('input[type="checkbox"]:checked').each(function() {
  selectedValues.push($(this).val());
});
console.log(selectedValues);

테이블 행 반복

HTML 테이블의 각 행에 대해 데이터 처리

$('#contentsArea table tr').each(function() {
  const rowData = $(this).find('td').map(function() {
    return $(this).text();
  });
  console.log(rowData);
});

버튼 클릭 이벤트 추가

모든 버튼에 클릭 이벤트를 동적으로 추가하기

$('#contentsArea button').each(function() {
  $(this).on('click', function() {
    console.log(`Button ${$(this).text()} clicked!`);
  });
});