[jQuery] filter

이미 select된 element에 대해 추가적으로 또 select(필터링)하는 함수

배열처럼 인덱스(index), 요소의 속성값으로 선택하는 함수도 있다

 

~ .first() : ~의 첫번째 요소만 선택 $('~:first')와 동일한 결과가 나온다

~ .last() : ~의 마지막 요소만 선택 $('~:last')와 동일한 결과가 나온다

~ .eq(i) : ~의 i번째 요소만 선택 $('~:eq(i)')와 동일한 결과가 나온다 -> 슈도클래스에도 동일한 것 있다

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

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

~ .not(selector) : ~ 중 selecotr 지정 요소를 제외 -> attribute selector 사용 [attr = value] 형태

 

* find와 filter의 차이

find 는 전체(혹은 기준 값 하위)에서 검색을 하지만 filter 는 자기 자신의 레벨에서 검색을 한다.

그래서 apple, kiwi, pineapple 을 검색하기 위하여 find 를 쓸때는 $("#fruits") 를 썼지만 filter 를 쓸때는 $("#fruits div") 로 사용하였다.

그래야 fruits div 하위이 div 를 검색할 수 있기 때문이다.

만약 filter 를 사용할때 $("#fruits) 을 사용했다면 하위가 아닌 fruits 자체를 kiwi 라는 아이디명과 비교했을 것이다.

 

* Pseudo Classes (슈도클래스)특정 셀렉터에 특별한 효과를 부여하기 위해 사용한다기본 구문 : selector:pseudo-class {property: value}

기본 목록 : :link, :visited :hover, :active, :focus, :first-child, nth-child(n), :checked

:active - 활성화된 요소에 대한 속성을 지정한다

 

이 둘의 차이점은? 

$('li')[0]; -> DOM element

$('li').eq(0); -> jquery object

이 아래 코드는 실행되지 않는다 why? addClass는 jquery 메소드이니까!

$('li')[0].addClass('selected');

 

 

<script>
$(document).ready(function(){
	$('button').click(function(){
    	$('*').removeClass('.selected');
        $('#result').text('결과');
    });
    $('#btn11').click(function(){
    	$('li').first().addClass('selected');
        $('li:first').addClass('selected');
    });
    $('#btn12').click(function(){
    	$('li').eq(1).addClass('selected');
        $('li:eq(1)').addClass('selected');
    });
    $('#btn14').click(function(){
    	$('li').filter('.a1').addClass('selected');
        
        //filter 매개변수로 함수도 올 수 있다 callback 함수 사용 가능하다
        //<'li'> 중에서 '차'가 들어간 것만 선택한다
        //참/거짓을 리턴하고 참인 것만 선택된다
        $('li').filter(function(){
        //여기서의 this는 jquey object가 아니라 js dom element이다 고로 innerHTML 붙여진다
        //jquery로 하고 있으면 $(this)..
        	return this.innerHTML.indexOf('차') > -1            
        }).addClass('selected');
    });
    $('#btn15').click(function(){
    	$('li').not("[class*='b']").addClass('selected');
    });
    // find() vs filter()
	// 	find() : 선택된 것들의 하위에서 선택
	// 	filter() : 선택된 것들 중에서 선택
    $('#btn16').click(function(){
    	$('ul').find('.a1').addClass('selected');
    });
});
</script>

 

 

practice

 filter() jQuery 기본 셀렉터 문법에서 사용하던 필터 구문을 사용할 수 있다
 filter() 메서드는 두 가지 형식으로 사용할 수 있다
 $(셀렉터).filter(필터구문);
 $(셀렉터).filter(function(index, selector){ });     

<script>
$(document).ready(function () {
	$("#myInput").on("keyup", function() {
		let value = $(this).val().toLowerCase();
		//$("#demo").text(value); //확인용! 제대로 결과가 나오는지 확인하는

	$("#myTable tr").filter(function(){
		// 	if($(this).text().toLowerCase().indexOf(value) > -1) { //제이쿼리로 하는 방법
		// 		$(this).show();
		// 	}else {
		// 		$(this).hide();
		// 	} //얜 t/f 반환 안함

		$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
		//-1 보다 크면 값이 있는 것.
		})
	})

});
</script>