[jQuery] 필터링 메소드 (.eq, .slice)
2021. 8. 8. 00:43
728x90
01 .eq() 메소드
- 선택한 요소 중에서 전달받은
인덱스에 해당하는 요소를 선택. - 이때 선택한 요소 집합의
맨 처음 요소를 인덱스 0으로 놓고, 앞에서부터 검색.
<script>
$(function(){
//인덱스 번호가 2인 요소를 선택
$("ul li").eq(2).css("color","red");
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>제이쿼리 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="/resource/lib/jquery-3.6.0.min.js"></script>
<script>
$(function(){
//인덱스 번호가 2인 요소를 선택
$("ul li").eq(2).css("color","red");
});
</script>
</head>
<body>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</body>
</html>
02 .slice() 메소드
- 선택한 요소 중에서
전달받은 인덱스 범위에 해당하는 요소만을 선택. - slice(1, 3) : 인덱스가 1과
같거나(이상)3미만인 요소
<script>
$(function(){
$("#ul_1 li").slice(1,3).css("font-weight","bold");
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>제이쿼리 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='/resource/lib/jquery-3.6.0.min.js'></script>
<script>
$(function(){
$("#ul_1 li").slice(1,3).css("font-weight","bold");
});
</script>
</head>
<body>
<ul id="ul_1">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
<li>메뉴6</li>
</ul>
<ul id="ul_2">
<li>메뉴1</li>
</ul>
</body>
</html>
728x90
'jQuery > Study' 카테고리의 다른 글
