jQuery는 많은 기능을 가진 JavaScript 라이브러리로, HTML 문서의 요소에 대한 접근과 조작을 단순화하는 데 사용됩니다. jQuery의 each 메소드는 객체나 배열의 각 요소에 대해 함수를 실행하는 유용한 기능을 제공합니다. 이 글에서는 each 메소드를 사용하여 요소를 반복하고 유효성을 검증하는 방법에 대해 알아보겠습니다.

1. jQuery의 each 메소드

each 메소드는 jQuery 객체의 각 요소에 대해 지정된 함수를 실행합니다. 이를 통해 각 요소에 대해 동일한 작업을 수행할 수 있습니다. 아래는 each 메소드의 기본 구문입니다.

$.each(collection, function(index, value) {
  // 요소에 대해 수행할 작업
});

• collection: 반복할 대상 요소들의 컬렉션(배열 또는 객체)
• function(index, value): 각 요소에 대해 실행할 함수. index는 현재 요소의 인덱스, value는 현재 요소의 값입니다.

2. 요소 검증 예제

each 메소드를 사용하여 HTML 폼의 입력 요소를 반복하고 각 요소의 유효성을 검증하는 예제를 살펴보겠습니다.

<form id="myForm">
  <input type="text" class="required">
  <input type="email" class="required">
  <input type="checkbox" class="required">
</form>

위의 HTML 폼에서는 각 입력 요소에 required 클래스가 지정되어 있습니다.

$("#myForm").submit(function(event) {
  let isValid = true;
  $(".required", this).each(function() {
    if ($(this).val() === "" && !$(this).is(":checkbox:checked")) {
      isValid = false;
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });
  if (!isValid) {
    event.preventDefault();
  }
});

위의 JavaScript 코드는 each 메소드를 사용하여 폼의 각 요소를 반복하고 유효성을 검증합니다. 만약 값이 비어 있거나 체크박스가 체크되지 않으면 해당 입력 요소에 error 클래스가 추가됩니다. 유효성 검증에 실패한 경우 event.preventDefault()를 호출하여 폼의 기본 동작을 중단시킵니다.

jQuery의 each 메소드를 사용하여 요소를 반복하고 유효성을 검증하는 방법을 살펴보았습니다. 이를 통해 코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있습니다.

참고 문헌:

• https://api.jquery.com/each/
• https://www.w3schools.com/jquery/jquery_dom_get.asp