jQuery는 각종 DOM 요소에 대한 반복 작업을 보다 편리하게 처리할 수 있는 다양한 메소드를 제공합니다. 그 중에서도 each 메소드는 객체나 배열의 요소에 대해 반복 작업을 수행할 때 매우 유용하게 활용됩니다. 이번 포스트에서는 each 메소드를 사용하는 방법과 인덱스 매개변수를 활용한 예제에 대해 살펴보겠습니다.

jQuery each 메소드란

each 메소드는 jQuery 객체의 각 요소에 대해 함수를 실행하는 메소드입니다. 이 메소드를 사용하면 jQuery 객체에 있는 각 요소에 대해 접근하거나 작업을 할 수 있습니다.

jQuery each 메소드 구문

each 메소드의 기본 구문은 다음과 같습니다:

$.each(collection, function(index, value){
  // 반복 작업 수행
});

• collection: 순회할 대상인 배열이나 객체
• function(index, value): 반복 작업을 수행하는 함수. index는 현재 요소의 인덱스이고 value는 현재 요소의 값입니다.

jQuery each 메소드 예제

다음은 each 메소드를 사용하여 배열의 각 요소를 출력하는 간단한 예제입니다:

var arr = [ "apple", "banana", "cherry" ];
$.each(arr, function(index, value){
  console.log(index + ": " + value);
});

이 예제에서는 배열 arr의 각 요소를 순회하면서 각 요소의 인덱스와 값을 콘솔에 출력합니다.

jQuery each 메소드와 인덱스 매개변수 활용

each 메소드의 두 번째 매개변수로 전달되는 함수에서는 인덱스 매개변수를 활용하여 현재 순회 중인 요소의 인덱스에 접근할 수 있습니다. 이를 통해 각 요소에 대해 필요한 작업을 수행할 수 있습니다.

var colors = ["red", "green", "blue"];

$.each(colors, function(index, value) {
  $("#color-list").append("<li>" + value + "</li>");
});

위의 예제에서는 each 메소드를 사용하여 각 색상을 리스트 아이템으로 추가하는 작업을 수행합니다. index 매개변수를 사용하여 각 색상의 순서에 따라 적절한 작업을 수행할 수 있습니다.

each 메소드와 인덱스 매개변수를 활용하면 객체나 배열의 각 요소에 대해 효율적으로 작업을 수행할 수 있습니다. 이를 통해 반복 작업을 수행하거나 각 요소에 대해 일련의 작업을 쉽게 처리할 수 있습니다.

참고문헌:

• https://api.jquery.com/each/