-
211006_array,eachJQuery 2021. 10. 6. 14:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style type="text/css">
div.box {
border: 5px solid tomato;
margin-top: 20px;
width: 300px;
height: 120px;
padding: 20px 20px;
font-family: 'Nanum Pen Script';
font-size: 1.3em;
}
</style>
</head>
<body>
<h3>배열반복시 사용하는 $.each문</h3>
<script type="text/javascript">
var data1=["magenta","blue","orange","gray","yellow","green"];
/* i는 인덱스로 0번부터, elt는 element(인덱스에 해당하는 아이템값)로 생략가능 */
$.each(data1, function(i, elt) {
var s="<h2 style='color:"+elt+";width:200px;'>"+elt+"</h2>";
document.write(s);
});
</script>
<hr>
<div id="show"></div>
<script type="text/javascript">
//이중배열
var info=[
{name:"홍길동",hp:"010-1234-5678",addr:"서울시 성북구"},
{name:"유재석",hp:"010-9012-3456",addr:"서울시 강남구"},
{name:"박명수",hp:"010-7890-1234",addr:"서울시 종로구"}
];
var s="";
$.each(info, function(i, elt) {
s+="<div class='box'>";
s+="이름: "+elt.name+"<br>";
s+="연락처: "+elt.hp+"<br>";
s+="주소: "+elt.addr+"<br>";
s+="</div>";
});
$("#show").html(s);
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
21006_animate,button,each (0) 2021.10.06 211006_image,each,figure (0) 2021.10.06 211006_figure (0) 2021.10.06 211006_div,click,hide,show (0) 2021.10.06 211005_animate (0) 2021.10.05