jQuery - filter

 이미 select 된 element 에 대해 추가적으로 또 select 하는 (필터링) 하는 함수
 배열 처럼 인덱스(index)를 사용하여 선택하는 함수도 있고 요소의 속성값으로 선택하는 함수도 있다.
 
  ~ .first() : ~ 의 첫번째 요소만 선택    
   $(" ~ :first") 와 동일 결과
 
 ~ .last() : ~ 의 마지막 요소만 선택
  $(" ~ :last") 와 동일 결과
 
  ~ .eq(i) : ~ 의 i번째 요소만 선택
   $(" ~ :eq(i)") 와 동일 결과

~ .filter(selector) : ~ 중 selector 지정요소만 선택  

~ .filter(callback) : ~ 중 callback 결과가 '참' 인것만 선택

~ .not(selector) :   : ~ 중 selector 지정요소를  제외

* find 와 filter 차이
 ※ https://ghost41m.tistory.com/entry/jQuery-find-%EC%99%80-filter-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
 

 $(document).ready(function(){
 
// 버튼 클릭되면 일단 selected 클래스 제거
 $("button").click(function(){
        $("*").removeClass("selected");
    $("#result").text("결과");
 });
 

 * ~ .first() : ~ 의 첫번째 요소만 선택
 $("#btn11").click(function(){
        $("li").first().addClass("selected")
// $("li:first").addClass("selected")
});

 * ~ .last() : ~ 의 마지막 요소만 선택
 $("#btn12").click(function(){
         $("#menu1 li").last().addClass("selected");
 });

* ~ .eq(i) : ~ 의 i번째 요소만 선택
 $("#btn13").click(function(){
         $("li").eq(2).addClass("selected");

 * 선택된 element의 개수
 $("#result").text($("li").length);
});

* ~ .filter(selector) : ~ 중 selector 지정요소만 선택
$("#btn14").click(function(){
        //  $("li").filter(".a1").addClass("selected")
// 매개변수로 callback 함수 사용 가능!
       // ↓ <li> 중에서 "차" 가 들어간것만 선택
       // 위 함수는 참/거짓 을 리턴해주면 된다.  (참) 만 선택된다
        $("li").filter(function(){
      // 여기서의 this 는 JS NodeElement !!!
      return this.innerHTML.indexOf("차") > -1;  //참인 것
   }).addClass("selected");
});


* ~ .not(selector) :   : ~ 중 selector 지정요소를  제외
 $("#btn15").click(function(){
        // ↓ class 중에 b로 시작하는 것을 가진것들을 제외하기
        $("li").not("[class*='b']").addClass("selected")
});

---

- filter() jQuery 기본 셀렉터 문법에서 사용하던 필터 구문을 사용할 수 있습니다. 
- filter() 메서드는 두 가지 형식으로 사용할 수 있습니다.

     $(셀렉터).filter(필터구문);
     $(셀렉터).filter(function(index, selector){ }); 

  

- 검색하는 글자와 일치하는 글자가 있는 것만 남아있도록 함      

 $(document).ready(function(){

$("#myInput").on("keyup", function(){
    var value = $(this).val().toLowerCase(); //글을 쓰면 소문자로 value에 담음

$("#myTable tr").filter(function(){
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); //#myTable tr에 value 값이 있으면 toggle
     })
  });
});
​