[jQuery, javascript(js)] 반복문 예제 소스 포함(foreach, each, for)

안녕하세요 찌빠냥 입니다. 이번 포스팅에서는 javascript 및 제이쿼리 반복문에 대해 알아보겠습니다. jQuery는 자바스크립트(javascript)의 라이브러리로, 웹 개발을 보다 편리하게 만들어주는 다양한 함수를 제공합니다. 그중에서도 반복문은 특정 요소를 반복해서 처리하는 데 유용합니다.

jQuery에서는 다음과 같은 세 가지 반복문을 사용할 수 있습니다. 예제 파일도 다운로드 할 수 있으니 편하게 봐주세요

each() 사용법과 예제

each()는 jQuery의 대표적인 반복문으로, 요소의 배열이나 컬렉션을 반복해서 처리할 때 사용합니다. each()의 구문은 다음과 같습니다.

$(element).each(function(index, element) {
  // element는 현재 반복 중인 요소입니다.
  // index는 현재 반복 중인 요소의 인덱스입니다.
});

 

예를 들어, 다음과 같이 ul 태그의 li 요소를 반복해서 처리할 수 있습니다.

$("ul li").each(function(index, element) {
  // 현재 반복 중인 li 요소입니다.
  $(element).css("color", "red");
});

위 코드는 다음과 같이 동작합니다.

1. ul 태그의 li 요소를 하나씩 가져옵니다.
2. li 요소의 css() 메서드를 사용하여 글자 색상을 빨간색으로 설정합니다.

w3school forEach() 다른 예제 링크 (예제를 실행해 볼 수 있습니다.)

 

foreach()  사용법과 예제

foreach()는 each()와 비슷한 기능을 하는 반복문입니다. foreach()의 구문은 다음과 같습니다.

$(element).foreach(function(element) {
  // element는 현재 반복 중인 요소입니다.
});

 

예를 들어, 다음과 같이 ul 태그의 li 요소를 반복해서 처리할 수 있습니다.

Array.from($("ul li")).forEach( function(element, index){
	// 이 예제에서는 $("ul li") 부분을 Array 객체로 인식 안되는 브라우저가 있기 때문에
	// Array.from() 을 사용해 Array 객체로 만들어서 사용합니다.
	$(element).css("color", "red");
});

위 코드는 다음과 같이 동작합니다.

1. ul 태그의 li 요소를 하나씩 가져옵니다.
2. li 요소의 css() 메서드를 사용하여 글자 색상을 빨간색으로 설정합니다.

w3school forEach() 다른 예제 링크 (예제를 실행해 볼 수 있습니다.)

for()  사용법과 예제

for()는 자바스크립트의 기본 반복문으로, jQuery에서도 사용할 수 있습니다. for()의 구문은 다음과 같습니다.

 

for (var i = 0; i < element.length; i++) {
  // element는 현재 반복 중인 요소입니다.
}

예를 들어, 다음과 같이 fruits 배열을 for 문을 이용해서 처리할 수 있습니다.

let text = "";
const fruits = ["apple", "orange", "cherry"];
//for문
for (var i = 0; i <fruits.length; i++) {
	text += i + " " + fruits[i] +"<br>";
};
document.getElementById("demo").innerHTML = text;

위 코드는 다음과 같이 동작합니다.

 

1. fruits의 요소 개수를 length 속성으로 가져옵니다.
2. 0부터 length - 1까지 반복해서 text에 추가합니다.
3. i는 현재 반복 중인 요소의 인덱스입니다.
4. id가 demo 인 요소의 innerHtml값에 text를 입력합니다.

결과 :

0 apple
1 orange
2 cherry

w3school for() 다른 예제 링크 (예제를 실행해 볼 수 있습니다.)

 

 

결론

jQuery의 반복문은 특정 요소를 반복해서 처리할 때 유용합니다. 각 반복문마다 장단점이 있으므로, 상황에 맞게 적절한 반복문을 선택하는 것이 좋습니다.

 

예제 소스 다운로드

for,foreach,each 예제.html

0.00MB