[JQuery] 반복문 each break / continue 사용법

| 반복문 - each() 

jQuery 사용 중 셀렉터(selector)를 통해 여러 요소를 선택한 뒤 for문 처럼 요소들을 반복하며 특정 작업을 하기 each() 메서드를 사용합니다.

// jQeury each() method
$.each(object, function(index, item){ });
$(selector).each(function(index, item){ });

이때 특정 로직이 만족하면 반복문을 멈추거나(break) 다음요소로 넘어가야할 경우(continue)가 있는데 이때 Jquery each 메서드 내에서는 return "boolean" 값으로 대체하여 사용합니다.

break > return false

continue > return true

|  예제 

아래는 실무에서 자주 사용될법한 예제로 input 반복하며 값에 대한 유효성 체크하는 간단한 함수 입니다. input 엘리먼트들을 순차적으로 반복하며 값이 입력되지 않았을 경우 해당 엘리먼트에 focus 후 alert 메시지를 보여주고 return false를 통해 each 문을 빠져 나옵니다.

* html

<input type="text" name="inputObject1" value="inputValue1">
<input type="text" name="inputObject2" value="inputValue2">
<input type="text" name="inputObject3" value="">
<input type="text" name="inputObject4" value="">

* js

var checkInputValue = function(){
       var isValid = true;
       $("input[name^='inputObject']").each(function(){
              if($(this).val() == ""){
                       alert( $(this).attr("name") + "의 값이 입력되지 않았습니다." );
                       $(this).focus();
                       isValid = false;
                       return false;        //break
               }
       }
       return isValid;
}