[jQuery] 배열처리

728x90

jQuery에서는 배열을 순회하기 위한 메서드로 $.each가 있습니다. 아래 예제는 숫자로 된 단순 배열을 $.each를 통해 순회하는 방법을 보여주고 있습니다.

$(function () {
	var obj = [
		1, 2, 3, 4, 5
	];

	$.each(obj, function (index, item) {
		alert(item);
	});
});

배열이 객체인 경우에도 같은 방법으로 순회합니다.

$(function () {
	var obj = [
		{ name : '홍길동', addr : '서울시' },
		{ name : '홍길순', addr : '부산시' },
		{ name : '홍길남', addr : '대구시' }
	];

	$.each(obj, function (index, item) {
		alert(item.name);
	});
});

$.each에서 obj는 배열 자체를 의미하며 item은 obj에서 가져온 각 개별 요소가 됩니다. index는 배열의 인덱스나 키에 해당합니다.

$.each는 javascript에서의 배열뿐 아니라 문서 내부의 요소도 순회할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$('span').each(function (index, item) {
				$(item).css('background', 'blue');
			});
		});
	</script>
</head>
<body>
	<div>
		<span>abc</span>
		<span>def</span>
		<span>ghi</span>
	</div>
</body>
</html>

예제에서 문서의 span요소는 총 3개이며 각각의 span요소를 순회하면서 스타일을 적용하게 됩니다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'Web > JQuery' 카테고리의 다른 글

[jQuery] 요소 조작 메서드 (0)	2020.06.07
[jQuery] 요소 탐색 메서드 (0)	2020.06.03
[jQuery] 객체 합치기 ($.extend) (0)	2020.06.02
[jQuery] 선택자 (0)	2020.06.02
[jQuery] 다운로드및 사용 (0)	2020.05.30

'Web > JQuery' 카테고리의 다른 글

티스토리툴바