filter() 메소드

 

선택자로 지정한 객체(요소)를 기준으로 객체 그룹에서 위치를 가지고 객체를 선택하는 메소드

즉, 필터링 기능

 

eq(i) : i=인덱스 위치와 일치하는 요소만 리턴 

not("") : 인자값과 일치하지 않는 요소만 리턴

 

 

ex.

class가 있는 h4 태그와 없는 h4 태그 선언

<h4 class="test">test-1</h4>

<h4 class="test">test-2</h4>

<h4 class="test">test-3</h4>

<h4 class="test">test-4</h4>

<h4>test-5</h4>

<h4 class="test">test-6</h4>

 

<script>

	$(document).ready(function(){

		// test class중에서 짝수 인덱스만 해당되게 필터를 걸어주고 css속성 변경
		$(".test").filter(":even") .css({"background":"tomato","color":"white"});
 
		// 함수를 매개변수로 하는 filter()
		$(".test").filter(function(index){

		// test 클래스 요소 중 홀수 인덱스 css속성 변경
		return index % 2 == 1; // 리턴결과가 true인 요소만 걸러냄
		}).css({"background":"yellowgreen","color":"white"});
 
		// h4태그 중 첫번째 인덱스 폰트 크게
		$("h4").first().css("font-size","1.5em");

		// h4태그 중 마지막 인덱스에 텍스트 추가
		$("h4").last().text($("h4").last().text() + ": 마지막 요소");

		// 3번 인덱스에 텍스트 추가
		$("h4").eq(3).text($("h4").eq(3).text() + " : eq()로 필터링 됨");

		// test 클래스가 아닌 객체에 css 설정(class 설정하지 않은 test-5)
		$("h4").not(".test").css({"background":"yellow","color":"black"});
	});

</script>

 

 

결과 

휴 멋진 김밥 속 완성