jQuery의 each 메소드는 배열이나 객체에 대해 반복 작업을 수행할 수 있게 해줍니다. 이를 활용하여 동적으로 요소를 추가하고자 할 때 유용하게 사용될 수 있습니다.

요소 추가를 위한 예제

다음은 each 메소드를 사용하여 리스트 항목을 반복하면서 <ul> 요소에 동적으로 <li> 요소를 추가하는 예제입니다.

const items = ["Apple", "Banana", "Cherry"];

$.each(items, function(index, value) {
  $("ul").append("<li>" + value + "</li>");
});

위 예제에서는 each 메소드를 사용하여 items 배열을 반복하고, 각 항목을 <ul> 요소에 추가하는 것을 볼 수 있습니다.

결과

위 예제를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

• Apple
• Banana
• Cherry

결론

each 메소드는 jQuery를 사용하여 동적으로 요소를 추가할 때 매우 유용한 기능입니다. 이를 효과적으로 활용하면 반복 작업을 간단하게 처리할 수 있으며, 코드를 더 간결하게 유지할 수 있습니다.

더 많은 정보는 jQuery 공식 문서에서 확인할 수 있습니다.