[jQuery] jquery filter

우리는

 

 $('#target'); <== 이런 css selector방식으로 원하는 element를 select하는 법을 배웠다.

 

$('.nav_li').css({border:"red"});

 

이런 selector가 있다고 치자. 

 

근데 .nav_li라는 class를 가진 객체가 엄청나게 많다고 생각해보자.

그리고 우리는 .nav_li중 몇몇의 element만 select하고 싶다고 하자.

 

이럴떄 우리는 jQuery filter라는 것을 사용해야한다. filter라는 이름처럼 우리가 select한 element를 filter하는 것이다. css selector와 굉장히 비슷하지만 jQuery filter은 추가된게 있다.

 

만약 nav_li 클래스를 가진 element중 제일 처음에 나온것을 선택하고 싶다고 하자.

 

$('.nav_li:first').css({border:"red"});

 

이런 식으로 :원하는 filter을 선택해주면 된다. 

 

한가지 기억해야될 점은 :first 와 :first-child가 다르다는점이다.

$('.nav_li:first-child').css({border:"red"});

위 코드는 .nav_li의 parent의 첫번째 element가 .nav_li 클래스를 가지고있는 것을 선택한다.

 

즉 :first는 코딩상 제일 처음에 나오는 nav_li를 가리키지만

:first-child는 parent의 첫번째 child를 가리킨다 first child가 .nav_li라는 클래스를 가지고 있지 않다면 선택 불가능.

 

:first는 jQuery에만 존재하는 filter이다

 

$('.nav_li:even').css({border:"red"});

이런식을 짝수 index에 있는 것들을 선택가능하다. 역시 jQuery에만 존재하는 것

 

 

다른 filter들 

$('section:not("#contact")').css({border:"red"});
//이런 식으로 #contact를 제외한 section의 모든 element를 선택가능

$('#social-nav li:lt(3)').css({border:"2px solid blue"});
$('#social-nav li:gt(2)').css({border:"2px solid blue"});
//이렇게 index가 3 보다 작은 element나 2보다 큰 element를 선택 가능


$('div[class]').css({border:"2px solid blue"});//class attribute를 가진 div element
$('form[class*="search"]').css({border:"2px solid blue"});
//class 안에search라는 substring을 가진 모든 form

//당연히 css attribue selector도 사용가능하다

 

jquery사이트에서 더볼수 있음