[JavaScript] Array jQuery each() 메서드 사용법(배열 each())

IT•개발 끄적/JavaScript

[JavaScript] Array jQuery each() 메서드 사용법(배열 each())

소다맛사탕 2021. 5. 29. 01:50

안녕하세요. 소다맛사탕 입니다.

지난 포스팅인 '[JavaScript] Array forEach() 메서드 사용법(배열 forEach())'에 이어서 오늘은 jQuery를 이용한 배열을 관리하는 each() 메서드를 알아보겠습니다.

1. 사용법

$.each(object, function(index, element) { });

$(selector).each(function(index, element) { });

index : 요소의 인덱스.

element : 매개변수가 가지고 있는 현재 요소.

2. 예시

// 배열 선언
var arrVal = ["가", "나", "다", "라"];

// 배열 each()문 선언
$.each(arrVal, function(index, element){
	console.log(index + " :: " + element);
});
// 결과
// 0 :: 가
// 1 :: 나
// 2 :: 다
// 3 :: 라

※ 배열의 스택은 0부터 시작.

selector 예시.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
	$("#btn_submit").click(function(){
		btn_submit();
	});
	$("#btn_submit2").click(function(){
		btn_submit2();
	});
});
function btn_submit(){
	$("li").each(function(){
		$("#text").html($(this).text());
	});
}

function btn_submit2(){
	var strHtml = "";
	$("li").each(function(){
		strHtml += $(this).text() + "</br>";
	});
	$("#text2").html(strHtml);
}
</script>
</head>
<body>
 <ul>
  	<li>첫줄</li>
  	<li>두번째</li>
  	<li>세번째줄</li>
  </ul>
  
  <button type="button" id="btn_submit">클릭해보세요.</button>
  <div id="text" style="margin-top: 10px;"></div>
  
  <button type="button" id="btn_submit2">클릭해보세요.</button>
  <div id="text2" style="margin-top: 10px;"></div>
</body>
</html>

----- 결과 -----

※ each()문은 for()문과 마찬가지로 output 데이터를 출력할때 내부에서 값을 출력시 마지막 값만 출력되고,

변수를 따로 선언후에 반복문을 빠져나와 값을 출력하면 값이 모두 출력됩니다. 물론 '+='을 썼을때..

저작자표시