[jQuery] jQuery each 메소드를 활용한 DOM 조작

26 Dec 2023

jQuery

jQuery는 강력한 DOM 조작을 위한 다양한 메소드를 제공합니다. 여러 DOM 요소에 대해 반복적인 작업을 수행해야 하는 경우 each 메소드를 사용하여 각 요소에 대해 일련의 작업을 쉽게 수행할 수 있습니다.

each 메소드 소개

each 메소드는 jQuery 객체 내의 각 요소에 대해 지정된 함수를 실행합니다. 이를 통해 요소들을 반복하면서 필요한 작업을 수행할 수 있습니다.

$(".my-elements").each(function() {
  // 각 요소에 대한 처리
});

위 예시에서는 my-elements 클래스를 가진 모든 요소에 대해 함수를 실행합니다.

간단한 예시

아래 예시를 통해 each 메소드를 사용한 간단한 DOM 조작을 살펴봅시다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery each 메소드 예시</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>

<h2>각 요소에 대한 처리</h2>

<p class="my-elements">첫 번째 문단</p>
<p class="my-elements">두 번째 문단</p>
<p class="my-elements">세 번째 문단</p>

<script>
$(".my-elements").each(function() {
  // 각 요소에 대한 처리
  $(this).addClass("highlight");
});
</script>

</body>
</html>

위 예시에서는 my-elements 클래스를 가진 모든 요소에 대해 highlight 클래스를 추가하여 배경색을 변경하는 간단한 예시를 보여줍니다.

each 메소드를 사용하여 DOM 요소를 반복하고 필요한 조작을 수행할 수 있습니다. 이는 jQuery를 효과적으로 활용하여 웹 페이지의 동적인 요소 조작을 가능케 합니다.

결론

jQuery의 each 메소드는 여러 DOM 요소에 대해 쉽게 반복 작업을 수행할 수 있게 해줍니다. 이를 활용하여 강력한 DOM 조작을 구현할 수 있으며, 웹 페이지의 사용자 경험을 향상시키는 데 도움이 됩니다.