9. jQuery 반복문 - each()
페이지 정보
작성자 관리자 댓글 0건 조회 533회 작성일 22-01-09 18:49본문
9. jQuery 반복문 - each()
each()메소드는 반복문 역할을 하는 메소드이다.
실습 : jquery07.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var arr = ["사과", "오렌지", "바나나", "복숭아"];
console.log(arr[2]);
$.each(arr, function(i, val){
console.log(i+': '+val);
});
$('.div1 [name=input1]').keyup(function(){
var content = $(this).val();
console.log(content);
$.each(arr, function(i, val){
$('.div1 [name=input1]').siblings(":eq("+i+")").val(val);
});
});
});
</script>
<style>
.div1 input{
border-radius : 5px;
border : 3px solid red;
box-shadow: 0 0 3px gray, 0 0 3px silver inset;
margin-top:10px;
padding : 10px;
width: 300px;
}
.div1 input.inputCopy{
border-color:green;
}
</style>
</head>
<body>
<div class="div1">
<input type="text" name="input1" />
<input type="text" name="inputCopy" class="inputCopy"/>
<input type="text" name="inputCopy" class="inputCopy"/>
<input type="text" name="inputCopy" class="inputCopy"/>
<input type="text" name="inputCopy" class="inputCopy"/>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.