#jQuery. 요소반복 each()
💡개념
jQuery.each()
✔ jQuery.each() 함수는 배열이나 객체를 반복적으로 처리할 때 사용된다.
✔ 첫 번째 인자에는 자바스크립트 배열이나 래퍼세트 객체가 올 수 있다.
✔ 두 번째 인자에는 각 요소를 반복하면서 처리할 콜백 함수가 온다.
✔ 콜백 함수는 두 개의 매개변수(index: 배열인덱스, item: 반복하는 요소객체)를 갖는다.
📝예제1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var array = [
{
name:'ssafy',
link:'http://www.ssafy.com'
},
{
name:'naver',
link:'http://www.naver.com'
},
{
name:'googel',
link:'http://www.google.com'
}
];
var outHtml = '';
$.each(array,function(index, item){
outHtml+='<a href="'+item.link+'">';
outHtml += '<h2>'+item.name+'</h2></a>';
});
$("body").html(outHtml);
</script>
</body>
</html>
👍결과
jQuery.each()
✔ jQuery.each() 함수는 배열이나 객체를 반복적으로 처리할 때 사용된다.
✔ 첫 번째 인자에는 자바스크립트 배열이나 래퍼세트 객체가 올 수 있다.
✔ 두 번째 인자에는 각 요소를 반복하면서 처리할 콜백 함수가 온다.
✔ 콜백 함수는 두 개의 매개변수(index: 배열인덱스, item: 반복하는 요소객체)를 갖는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var array = [
{
name:'ssafy',
link:'http://www.ssafy.com'
},
{
name:'naver',
link:'http://www.naver.com'
},
{
name:'googel',
link:'http://www.google.com'
}
];
var outHtml = '';
$.each(array,function(index, item){
outHtml+='<a href="'+item.link+'">';
outHtml += '<h2>'+item.name+'</h2></a>';
});
$("body").html(outHtml);
</script>
</body>
</html>
👍결과
📝예제2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.high-light-0{background-color: yellow;}
.high-light-1{background-color: orange;}
.high-light-2{background-color: green;}
.high-light-3{background-color: pink;}
.high-light-4{background-color: lime;}
</style>
</head>
<body>
<h2>첫번째</h2>
<h2>두번째</h2>
<h2>세번째</h2>
<h2>네번째</h2>
<h2>다섯번째</h2>
<script>
$(function(){
$("h2").each(function(index, item){
$(item).addClass("high-light-"+index);
})
});
</script>
</body>
</html>
👍결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.high-light-0{background-color: yellow;}
.high-light-1{background-color: orange;}
.high-light-2{background-color: green;}
.high-light-3{background-color: pink;}
.high-light-4{background-color: lime;}
</style>
</head>
<body>
<h2>첫번째</h2>
<h2>두번째</h2>
<h2>세번째</h2>
<h2>네번째</h2>
<h2>다섯번째</h2>
<script>
$(function(){
$("h2").each(function(index, item){
$(item).addClass("high-light-"+index);
})
});
</script>
</body>
</html>
Author And Source
이 문제에 관하여(#jQuery. 요소반복 each()), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gisung/jQuery.-요소반복-each저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)