Web/JQuery
[jQuery] 배열처리
클리엘
2020. 6. 2. 11:14
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