jQuery Selector (2) 필터선택자

선택자의 형제들이 많을 경우 어느 특정한 형제들을 선택할때 사용하는 선택자. 예를 들어

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

있을 경우 $('부모선택자 자식선택자')를쓰고 .뒤에 해당 탐색선택자들을 써준다.

list라는 id를 가진 ul이 있고 그 안에 각각의 li자식들이 있다. li들끼리는 서로 형제고 부모는 ul이다.

첫 번째줄 코드는 CSS표기법이고 두 번째줄 코드는 jQuery 표기법이다. 첫 번째줄 두 번째줄 코드는 실행이 되지만 세 번째줄 코드는 실행이 되지않는다. 이유는 탐색선택자를 쓰기 위해서는 $('')안에 자식까지 넣어줘야 한다.

.eq() 괄호안의 숫자는 index를 의미하고 0부터 시작하기때문에 2는 3번째가 되고 CSS가 입혀진다.

• first() 선택자
  부모의 여러자식중 첫 번째 자식을 선택한다.

  $('#list li').first().css({'background-color' : 'red'});

• last() 선택자
  부모의 여러자식중 마지막 자식을 선택한다.
  

$('#list li').last().css({'background-color' : 'red'});

• even 선택자
  부모의 여러자식중 홀수 번째 자식들을 선택한다.
  

$('#list li').even().css({'background-color' : 'red'});

• odd 선택자
  부모의 여러자식중 짝수 번째 자식들을 선택한다.
  

$('#list li').odd().css({'background-color' : 'red'});

• eq(i) 선택자
  부모의 여러자식중 eq(i) 번째 자식을 선택한다.
  i는 index를 뜻한다. index는 0부터 시작
  

$('#list li').eq(1).css({'background-color' : 'red'});

그 밖의 탐색 선택자들

• lt(i) 선택자

$('#list li:lt(i)'); 선택한 index보다 작은 index 번째 자식들을 모두 선택

• gt(i) 선택자

$('#list li:gt(i)'); 선택한 index보다 큰 index 번째 자식들을 모두 선택

lt(i)와 gt(i) 선택자는 자기자신을 포함하지 않는다. 그리고 .eq(i)메서드처럼 쓸 수가없고 CSS방식으로 해줘야 선택되어진다.

• first-of-type 선택자
• last-of-type 선택자
• nth-child(숫자n) 선택자
  등등 CSS 방식의 선택자들이 있다.