[jQuery] $.each() 함수에서 break문, continue문 사용하는 방법

$.each() 함수는 단순히 배열이나 객체를 순회하면서 그때마다 callback을 실행시켜주는 함수이다.

따라서 반복문이 아니기 때문에 break와 continue가 먹히지 않는다.

 

 

 

 

 

break문 continue문을 사용하려면?

 

반복문에는 skip할 수 있는 제어문이 필요하다. $.each() 함수는 return 키워드를 통해 이를 제어한다.

만약 break를 사용하고 싶다면 callback에서 false를 리턴하면 된다.

그외의 것을 리턴하는 경우 continue와 같이 동작한다.

 

 

let elems = $('.item-box').find('.item');
let elem;
elems.each(function() {
	if($(this).data('index') == 10) {
        return false; // break와 동일하게 동작
    }
});

let elems = $('.item-box').find('.item');
let elem;
elems.each(function(index) {
	if($(this).data('flag') == 1) {
    	return; //continue와 동일하게 동작
    }
    console.log(index + "번째 item flag != 1");
});

 

 

 

$.each() 함수에서 특정 값을 리턴하고 싶을 때

 

$.each() 함수의 callback 함수는 특정 값을 리턴하고 싶은 경우 상위 스코프에 특정 변수를 선언해두고 그 변수에 값을 할당해야한다. 할당한 다음에는 return false를 통해 반복을 종료한다.

 

let elems = $('.item-box').find('.item');
let elem;
elems.each(function() {
	if($(this).data('index') == 10) {
    	elem = $(this); // 변수에 객체 할당
        return false; // 반복종료
    }
});

 

 

+ $() 함수

 

jQuery를 활용하여 html요소를 입맛에 맞게 다루고 싶다면 반드시 $()함수를 이용해야 한다.

• $() 함수는 선택된 html요소를 제이쿼리에서 이용가능한 형태로 생성해준다.
• ()안에 들어가는 인수(params)에 html 태그 이름 또는 css 선택자를 넣으면 해당하는 html 요소를 선택할 수 있다.

이때 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 한다.

 

 

위의 예제들과 비슷한 코드를 제이쿼리로 작성하고 있었다.

$.each() 함수를 사용하던 도중 callback 내부에서 elems[i]를 활용하여 제이쿼리 함수를 사용하고자 했으나 자꾸만 TypeError: find is not a function ... 등과 같은 에러가 발생했다.

한참 이유를 찾아보다가 위의 이유로 인한 에러라는 것을 알게 되었고 elems[i]를 $()로 감싸준 다음 find()함수를 사용하니 잘 작동이 됐다.

알고보니 너무 간단한 이유라 너무 허무함ㅎ,,, 그래도 이젠 절대 까먹진 않을 것같다,,,