Frontend/jQuery
05. jQuery, each반복문
개발개발빈이
2022. 6. 7. 20:17
○ jQuery에서 기존요소 접근 vs 새로운 요소 생성
- $("html태그") : <body>에 있는 요소들 중에서 해당 요소에 접근 (기존 요소 찾기)
- $("<html태그>") : <body>에 새로운 해당 요소를 생성
$("li") // <body>에 있는 <li>요소에 접근
$("<li>") // <body>에 새로운 <li>요소를 생성
○ jQuery의 each반복문
- for( in ) {} 또는 for( : ) {} 과 동일한 결과
- 형식) $.each(배열, function(){ 실행할 코드 }); | $(배열).each(function(){ 실행할 코드 });
$("li").each(function(){//li안의 요소들을 처음부터 끝까지 하나씩 꺼내온다
var result=$(this).text();
});
● PRACTICE 연습문제
Q) each 반복문 이용해서 id=displayList에 구구단 7단 출력하기
<head>
<title>each반복문</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
#displayList{
margin: 20px;
width: 400px;
height: 300px;
background: #81d4fa;
padding: 20px;
list-style: none;
}
</style>
</head>
<body>
<h3>each반복문</h3>
<button id="startbtn">7단</button>
<ul id="displayList"></ul>
<script>
$("#startbtn").click(function(){
var dan=7
for(i=1; i<=9; i++){
$("<li>").text(dan+" * "+ i + " = " + (dan*i)).appendTo("#displayList");
}//for end
$("li").each(function(){//li안에 있는 애들을 처음부터 끝까지 하나씩 꺼내온다
var result=$(this).text();
});//each() end
});//click end
</script>