본문 바로가기
내마음대로만들어보자/JS

eq(index) / lt(index) / gt(index) 탐색자

by 소농민! 2021. 8. 18.
728x90

eq()탐색 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택하고

lt()선택자는 선택한 요소 중 지정한 인덱스보다 작은 인덱스를 참조하는 요소만 선택한다.

이와 반대로, gt()는 선택한 요소 중 지정한 인덱스보다 큰 인덱스를 참조하는 요소만 선택한다.

 

* 기본형

$("요소 선택"):eq(index)") 또는 $("요소 선택").eq(index)
$("요소 선택"):lt(index)")
$("요소 선택"):gt(index)")

 

* 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#menu li").eq(2)
.css({"background-color":"#ff0"});

$("#menu li:lt(2)")
.css({"background-color":"#0ff"});

$("#menu li:gt(2)")
.css({"background-color":"#f0f"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
</html>

'내마음대로만들어보자 > JS' 카테고리의 다른 글

nth-child(숫자n) / nth-last-child(숫자) 선택자  (0) 2021.08.18
first-of-type / last-of-type 선택자  (0) 2021.08.18
even/odd 선택자  (0) 2021.08.18
first/last 선택자  (0) 2021.08.18
제이쿼리 선택자  (0) 2021.08.16