간단한 기본선택자보다 더 정밀하고 복잡한 선택이 필요할 경우에는 필터와 선택메서드를 이용한다.

 

일단 필터의 기본형태는 다음과 같다.

$('선택자:필터').내용

그럼 먼저 순서에 관련한 필터부터 정리해야겠다.

:first 첫 번째 객체
:last 마지막 객체
:eq(n) n번째 객체, 시작이 0이다
:gt(n) n번째 초과 객체
:lt(n) n번째 미만 객체
:odd 홀수 번째 객체
:even 짝수 번째 객체

 

다음 코드를 보면 훨씬 쉽게 이해될거같다.

<body> <ul> <li>one <li>two <li>three <li>four <li>five <li>six <li>seven <li>eight <li>nine </ul> <script> $('li:first, li:list').css('background', 'yellow'); // li태그의 첫번째와 마지막 $('li:eq(6)').css('background', 'red'); // li의 6번째 태그 여기서는 7를 가르킨다 0부터시작하기 때문에 $('li:lt(4)').css('font-weight', 'bold'); // li의 4번째 미만 여기서는 5미만이다 </script> </body>

 

숫자를 가지고 판단해보니 그렇게 어렵지는 않다. 

그냥 첫번째 순서가 0부터 시작한다고 생각하는게 중요할거 같다. 
 다음은 even과 odd 및 nth-child이다.
<body> <table> <tr><td>내용 1</td></tr> <tr><td>내용 2</td></tr> <tr><td>내용 3</td></tr> <tr><td>내용 4</td></tr> <tr><td>내용 5</td></tr> <tr><td>내용 6</td></tr> <table> <script> $('tr:even').css('background', 'blue'); // tr의 짝수번 $('tr:odd').css('background', 'red'); // 홀수번 $('tr:nth-child(3n+2)').css('background', 'yellow'); // tr의 0,5,8 .. 번째 $('tr:nth-child(4n)').css('background', 'green'); // tr의 0,4,8,번째 </script> </body>
 
요것두 마찬가지로 시작이 0번이기 때문에 잘 생각해서 사용하면 된다. 
nth-child(n)같은 경우에는 n에 함수가 들어가서 함수번째 라고 생각하면 된다.  
생각보다 외울것들이 많은것 같다 하나하나 차근히 외워야겠다.

 

 

'JavaScript > jquery' 카테고리의 다른 글

eq()  (0) 2019.09.09
필터(FILTER) 3  (0) 2017.10.03
jQuery 자식 선택자  (0) 2017.09.18
jQuery 선택자 (selector)  (0) 2017.09.18
jQuery 명칭 충돌 (noConflict)  (0) 2017.09.18

티스토리툴바