<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>each 메소드</h1>
<hr>
<h3>each 메소드 호출-1</h3>
<h3>each 메소드 호출-2</h3>
<h3>each 메소드 호출-3</h3>
<h3>each 메소드 호출-4</h3>
<h3>each 메소드 호출-5</h3>
<script type="text/javascript">
//선택자에 의해 다수의 태그가 검색되면 태그 갯수만큼 jQuery 객체를 생성하여 메소드 호출
// => 묵시적 반복 : 검색된 모든 태그를 jQuery 객체로 생성하여 메소드를 반복적으로 호출
// => 검색된 모든 태그에 동일한 기능 구현
//$("h3").css("color","red");
/*
$("h3").eq(0).css("color","red");
$("h3").eq(1).css("color","green");
$("h3").eq(2).css("color","blue");
$("h3").eq(3).css("color","orange");
$("h3").eq(4).css("color","lime");
*/
/*
var color=["red","green","blue","orange","lime"];
//$(selector).size() : 선택자로 검색된 태그의 갯수를 반환하는 메소드
// => jQuery 3.0 이상부터는 length 프로퍼티를 이용하여 태그의 갯수를 제공받아 사용
for(i=0;i<$("h3").length;i++) {//명시적 반복
$("h3").eq(i).css("color",color[i]);
}
*/
var color=["red","green","blue","orange","lime"];
//$(selector).each(callback([index][,element])) : 선택자로 검색된 태그의 갯수만큼
//콜백함수를 반복적으로 호출하는 메소드 - 명시적 반복
// => 콜백함수의 매개변수에는 검색되어 처리될 태그의 첨자와 태그의 Element 객체가
//자동으로 저장되어 제공
$("h3").each(function(i, element) {
//$("h3").eq(i).css("color",color[i]);
//선택자 대신 자바스크립트 객체를 사용하여 jQuery 객체를 반환받아 메소드 호출 가능
//$(element).css("color",color[i]);
//this : 콜백함수에서 처리중인 태그의 Element 객체를 표현하기 위한 키워드
// => this : Element 객체, $(this) : jQuery 객체
$(this).css("color",color[i]);
});
</script>
</body>
</html>
