jQuery의 each 메소드는 배열 또는 객체에 대해 반복문을 실행하는데 유용한 기능을 제공합니다. 이 기능을 사용하면 간단한 방법으로 모든 요소에 대해 동일한 동작을 수행할 수 있습니다. 그러나 때로는 기본 제공되는 이터레이터만으로는 우리가 원하는 작업을 수행하기에는 제한적일 수 있습니다. 이럴 때 우리는 jQuery의 each 메소드를 커스텀 이터레이터와 함께 사용하여 원하는 작업을 수행할 수 있습니다.

jQuery each 메소드 기본 사용법

each 메소드는 jQuery 객체의 각 요소에 대해 지정된 동작을 수행합니다. 기본적인 사용법은 다음과 같습니다.

$("ul li").each(function(index, element) {
  // 각 요소에 대한 작업을 수행
  $(element).text("Item " + (index + 1));
});

위 예제는 <ul> 요소 안의 각 <li> 요소에 대해 “Item 1”, “Item 2”와 같이 텍스트를 설정하는 동작을 수행합니다.

jQuery each 메소드와 커스텀 이터레이터

만약 기본 제공되는 이터레이터를 사용하여 원하는 작업을 수행하기 어려운 경우, 우리는 커스텀 이터레이터를 사용하여 원하는 동작을 추가할 수 있습니다.

다음은 객체에 대해 커스텀 이터레이터를 사용하는 예제입니다.

$.each({ a: 1, b: 2, c: 3 }, function(key, value) {
  console.log(key + ": " + value);
});

이 예제는 객체의 각 키와 값에 대해 콘솔에 로그를 남기는 동작을 수행합니다.

결론

jQuery의 each 메소드는 기본적으로 배열이나 객체에 대해 반복문을 실행하는데 유용한 기능을 제공합니다. 또한 커스텀 이터레이터를 활용하여 우리가 원하는 작업을 수행할 수 있습니다.

더 많은 정보를 원하시면 jQuery 공식 문서를 확인해보세요.