<style>
.high-light-0 {
background: yellow;
}
.high-light-1 {
background: orange;
}
.high-light-2 {
background: blue;
}
.high-light-3 {
background: green;
}
.high-light-4 {
background: red;
}
.high-light-5 {
background: violet;
}
</style>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
<h1>item - 5</h1>
</body>$() 메서드로 h1 객체를 선택하면 body 태그안의 6개 문서 객체를 가져온다
각각의 객체에 다른 설정을 하고 싶을 때 each() 메서드를 사용한다
$(function () {
$('h1').each(function (index, item) {
$(item).addClass('high-light-' + index);
});
});
$(function () {
$('h1').each(function (index, item) {
$(this).addClass('high-light-' + index);
});
});each() 메서드의 매개변수로 입력한 함수 안에서 this 키워드와 item은 의미가 같다
(this를 더 많이 쓴다)
addClass 특수한 사용법
$(function () {
$('h1').addClass(function(index){
return 'high-light-' + index;
})
});addClass() 메서드의 매개변수에 함수 입력 가능
대부분의 jQuery 메서드는 이와 같은 특징을 가진다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 08) - 충돌 방지 (0) | 2020.07.30 |
|---|---|
| JS jQuery (part. 07) - 객체 확장 (0) | 2020.07.30 |
| JS jQuery (part. 05) - 배열 관리 (0) | 2020.07.30 |
| JS jQuery (part. 04) - 필터 선택자 (0) | 2020.07.29 |
| JS jQuery (part. 03) - 속성 선택자 (0) | 2020.07.29 |
