jQuery/jQuery 기본
02_필터선택자(eq,even,odd,gt(),lt())
hyojinny
2022. 10. 20. 01:15
필터선택자 종류 | |||
:eq (index) | index 번호가 짝수 n번째 선택 | 지정값 선택 | 제이쿼리 배열인덱스 순서 0>1>2>3 0이 첫번째이다. |
:even | index 번호가 짝수 n번째 선택 | 짝수값 선택 | |
:odd | index 번호가 홀수 n번째 선택 | 홀수값 선택 | |
:gt (index) | index 지정값보다 큰값 선택 | 초과 값 선택 | |
:lt (index) | index 지정값보다 작은값 선택 | 미만 값 선택 |
지정값 선택하기
:eq()
지정값을 선택하는 방법은 2가지가 있다.
함수에 작접 인덱스 값 입력 | eq 메서드로 넣기 |
$('#header .gnb>li:eq(3)').css('border', '2px solid red');
|
$(function () {
var idx = 3;
$('#header .gnb>li:eq(' + idx + ')').css('border', '2px solid red');
|
이렇게 값을 직접 입력하면 3번째가 선택된다.
|
또는 함수 지정후 변수값을 지정하면 3번째가 찍힌다.
단 인덱스 값은 '홑따옴표' 를 사용하여 문자열로 만들어준다. |
짝수만 선택하기
:even
배열인덱스는 0 > 1 >2 > 3 이므로
0,2 번이 선택되면
짝수가 선택되어 진것처럼 보임
$('#header .gnb>li:even').css('border', '2px solid red');

홀수 선택하기
:odd
odd는 홀수이며 li들의 인덱스번호 1,3번이 선택됨
$('#header .gnb>li:odd').css('border', '2px solid red');

초과값 선택
:gt(0)
0번 첫번째보다 큰 것들이 선택됨
$('#header .gnb>li:gt(0)').css('border', '2px solid red');

미만값 선택
:lt(3)
3이므로 4번째 보다 작은것들이 선택됨
$('#header .gnb>li:lt(3)').css('border', '2px solid red');
