본문 바로가기
개발/jQuery

jQuery (제이쿼리) - jQuery filter(), not()

by 루 프란체 2018. 6. 17.

제이쿼리의 filter 함수는 조건에 맞는 값을 배열로 리턴해주는 기능을 한다.

반대로 not 함수는 이름에서부터 보이듯이 조건에 맞지 않는 값을 배열로 리턴해주는 기능을 한다.


조건으로는 셀렉터를 넣는 방법과 펑션을 이용하는 방법이 있는데 우선 셀렉터를 이용한 방법을 알아보자.

$(document).ready(function() {  
	var trueArr = $("p").filter(".this");
	// alert(trueArr.length);

	var falseArr = $("p").not(".this");
    // alert(falseArr.length);
    
    alert("this 클래스 갯수 : " + trueArr.length + ", this 클래스 아닌 갯수 : " + falseArr.length);
});

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

위의 소스를 실행한 결과값은 각각 3 과 2 가 나오고,

filter 함수와 not 함수 둘 다 제이쿼리 배열로 결과값을 리턴해주는 것을 확인할 수 있었다.


그럼 이번에는 펑션을 이용해서 배열을 리턴 받는 예제를 작성해보자.

$(document).ready(function() {  
	var trueArr = $("p").filter(function(i, o) {
    	//alert(i + "번째 객체 확인 중");
    	return $(this).hasClass("this");
    });
	// alert(trueArr.length);

	var falseArr = $("p").not(function(i, o) {
    	//alert(i + "번째 객체 확인 중");
    	return $(this).hasClass("this");
    });
    // alert(falseArr.length);
    
    alert("this 클래스 갯수 : " + trueArr.length + ", this 클래스 아닌 갯수 : " + falseArr.length);
});

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

파라미터로는 인덱스와 객체를 받을 수 있으며 each 문과 마찬가지로 this 를 사용해 객체를 지정할 수 있다.


여기서 주의할 점은 제이쿼리 배열과 HTML 배열의 사용법이 다르다는 점인데 

제이쿼리 배열은 인덱스와 객체를 파라미터로 받아서 사용할 수 있는 반면 

HTML 배열은 객체와 인덱스를 파라미터로 받아서 사용할 수 있는 차이점이 있다.


아래 예제로 확인해보자.

$(document).ready(function() {  
	var jQueryArr = $("p").filter(function(idx, obj) {
    	return $(this).hasClass("this");
    });
    //alert(jQueryArr.length);
    
    var htmlArr = $("p").get().filter(function(obj, idx) {
    	return $(obj).hasClass("this");
    });
    //alert(htmlArr.length);
});

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

디스 이즈 스파르타!!

객체와 인덱스의 순서가 각각 다른 것을 확인할 수 있다.


또 다른 점으로는 htmlArr 에서는 $(this) 가 아닌 $(obj) 를 사용한 것을 볼 수 있는데 

이유는 왜인지는 모르겠지만 오브젝트를 파라미터로 받게 되면 this 예약어를 사용할 수 없게 된다. 왜일까?


아참, 그리고 HTML 객체 배열에서 not() 함수는 사용할 수 없었다. 이건 어떻게 사용해야 하는 걸까...

공부가 필요할 것 같다. 끝.

댓글