반응형
잡담
오늘도 예제를 통해서 even, odd, it, gt, eq에 대해서 알아보겠습니다. 따로 이론은 필요 없을 것 같아요.
1. even / odd
jQuery에서 .even()및. odd() 메서드는 선택된 요소 집합에서 짝수 또는 홀수 인덱스를 가진 요소들을 선택하는 데 사용됩니다. 이들 메서드는 0부터 시작하는 인덱스를 기준으로 요소를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-ul>li").even().css("backgroundColor","red")
$("#my-ul>li").odd().css("backgroundColor","green")
//even, odd
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1-index:0</li>
<li>리스트2-index:1</li>
<li>리스트3-index:2</li>
<li>리스트4-index:3</li>
<li>리스트5-index:4</li>
<li>리스트6-index:5</li>
<li>리스트7-index:6</li>
</ul>
</body>
</html>See the Pen jQuery even odd by 이현석 (@loxshqac-the-styleful) on CodePen.
해당내용은 아래의 코드를 이용해도 같은 값이 적용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//$("#my-ul>li").even().css("backgroundColor","red")
//$("#my-ul>li").odd().css("backgroundColor","green")
//even, odd
var li = document.querySelectorAll("#my-ul>li");
var len = li.length;
for(var i=0; i<len; i++){
if(i%2===0){
li[i].style.backgroundColor="red";
}else{
li[i].style.backgroundColor="green";
}
}
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1-index:0</li>
<li>리스트2-index:1</li>
<li>리스트3-index:2</li>
<li>리스트4-index:3</li>
<li>리스트5-index:4</li>
<li>리스트6-index:5</li>
<li>리스트7-index:6</li>
</ul>
</body>
</html>
2. it, gt
jQuery의. lt() 및. gt() 메서드는 선택한 요소 집합에서 지정된 인덱스보다 작거나 큰 인덱스를 가진 요소들을 선택하는 데 사용됩니다. 이 메서드들은 0부터 시작하는 인덱스를 기준으로 요소를 선택합니다.
- . lt(): 지정된 인덱스보다 작은 인덱스를 가진 요소들을 선택합니다.
- . gt(): 지정된 인덱스보다 큰 인덱스를 가진 요소들을 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-ul>li:lt(3)").css("backgroundColor","red")
//lt - less than - lt(3) - 인덱스 3번째 보다 작은거 선택
$("#my-ul>li:gt(3)").css("backgroundColor","green")
//gt - greater than - gt(3) - 인덱스 3번째 보다 큰거 선택
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1-index:0</li>
<li>리스트2-index:1</li>
<li>리스트3-index:2</li>
<li>리스트4-index:3</li>
<li>리스트5-index:4</li>
<li>리스트6-index:5</li>
<li>리스트7-index:6</li>
</ul>
</body>
</html>See the Pen jQuery lt gt by 이현석 (@loxshqac-the-styleful) on CodePen.
3. eq
jQuery의. eq() 메서드는 선택된 요소 집합에서 지정된 인덱스에 해당하는 요소를 선택하는 데 사용됩니다. 이 메서드는 0부터 시작하는 인덱스를 기준으로 요소를 선택합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my-ul>li").eq(2).css("backgroundColor","red")
//eq - equal - 같은
})
</script>
</head>
<body>
<ul id="my-ul">
<li>리스트1-index:0</li>
<li>리스트2-index:1</li>
<li>리스트3-index:2</li>
<li>리스트4-index:3</li>
<li>리스트5-index:4</li>
<li>리스트6-index:5</li>
<li>리스트7-index:6</li>
</ul>
</body>
</html>See the Pen jQuery eq by 이현석 (@loxshqac-the-styleful) on CodePen.
글을 마치며
대부분의 내용은 JavaScript를 통해서도 만들 수 있지만, 체이닝등을 이용해서 더 간단하고 직관적으로 스크립트를 작성할 수 있는 게 jQuery의 매력이 아닌가 싶습니다. 오늘도 예제를 통해서 알아보았습니다. 감사합니다.
반응형
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery / val, text, html (0) | 2024.04.30 |
|---|---|
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |
| [Java Script] jQuery / children, parent (0) | 2024.04.26 |
| [Java Script] jQuery / ready (0) | 2024.04.24 |