EverGiver
each() 본문
728x90
each() 란?
- jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있다.
- each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있다.
// jQuery 유틸리티 메서드
$.each(object, function(index, item){
});
// jQuery 일반 메서드
$(selector).each(function(index, item){
});
each() 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>each1</title>
</head>
<body>
<ul>
<li>사과</li>
<li>딸기</li>
<li>바나나</li>
<li>수박</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// console.log('OOO')
// 각 li에 있는 글자를 console.log()를 사용하여 콘솔창에 표시
// 첫번째 li의 글자를 콘솔창에 표시
/*
var name1 = $('li').eq(0).text()
console.log(name1)
*/
// each
$('li').each(function(){
var name = $(this).text()
console.log(name)
})
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>each2</title>
</head>
<body>
<ul>
<li><span>1</span> - 오리인테이션</li>
<li><span>5</span> - 실습</li>
<li><span>9</span> - 쪽지시험</li>
<li><span>17</span> - 조별실습</li>
<li><span>28</span> - 시험</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 첫번째 span의 숫자가 한자릴 숫자라면 앞에 '0'을 붙여서 표시하여라
/*
var day = $('span').eq(0).text()
if(day < 10){
$('span').eq(0).text('0'+day)
}
*/
$('span').each(function(){
var day = $(this).text()
if(day < 10){
$(this).text('0' + day)
}
})
})
</script>
</body>
</html>728x90
'Front-End (웹)/jQuery' Related Articles
more
Comments