(jquery 강좌) jQuery 배열(Array) 관리 jquery each
오라클자바커뮤니티에서 설립한 오엔제이프로그래밍
실무교육센터
(오라클,
SQL기초튜닝, 자바, 스프링3.X, 웹표준, HTML5, Ajax, jQuery,
안드로이드, 아이폰, 닷넷 실무강의)
jQuery에서 배열은 each 메소드를 이용하여 처리 가능
$.each(object, function(index, item) {})
$(selector).each(function(index, item) {})
$.each(object, function(index, item) {})
$(selector).each(function(index, item) {})
index : 배열의 인덱스 or 객체의 키
item : 해당 인덱스나 키가 가진 값
item : 해당 인덱스나 키가 가진 값
[예제1]
<html>
<head>
<meta charset="utf-8"/>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var array = [
{name: "OnJ", link:"http://onjprogramming.co.kr"},
{name: "OracleJavaCommunity", link:"http://oraclejavacommunity.co.kr"},
{name: "OnjSystems", link:"http://onjsystems.co.kr"}
];
$.each(array, function(index, item) {
var html="";
html += "<a href='" + item.link + "'>";
html += "<h1>" + item.name + "</h1>";
html += "</a>“;
document.body.innerHTML += html;
});
});
</script><body> </body></html>
html += "<h1>" + item.name + "</h1>";
html += "</a>“;
document.body.innerHTML += html;
});
});
</script><body> </body></html>
[예제2]
<html>
<head>
<meta charset="utf-8"/>
<script src="/ajaxjquery/jquery-1.10.2.min.js"></script>
<style>
.h_0 {color : yellow ;}
.h_1 {color : black ;}
.h_2 {color : red ;}
.h_3 {color : blue ;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("h1").each(function (index, item) {
$(item).addClass('h_' + index); //item대신 this도 가능
});
});
</script>
<body>
<h1>OnJ</h1>
<h1>OnjSystems.co.kr</h1>
<h1>OnjProgramming.co.kr</h1>
<h1>OracleJavaCommunity</h1>
</body>
</html>
댓글 없음:
댓글 쓰기