JQuery) filter(), end()

filter() : 이름 그대로, 선택한 것을 걸러준다.

예시를 위한 HTML

<h3>header - 0</h3>
<h3>header - 1</h3>
<h3>header - 2</h3>
<h3>header - 3</h3>
<h3>header - 4</h3>
<h3>header - 5</h3>
<h3>header - 6</h3>

 

Q) h3태그 중 짝수인것을 골라 css적용

$(function(){
	$('h3').filter(':even').css({ 
		backgroundColor: 'black',
		color: 'white'
	});
})

결과

---

Q) h3태그 중 index%3이 0인것의 css속성을 추가

$(function(){
	$('h3').filter(function(index){
		return index%3==0;
	}).css({ //filter가 true인 것만 css적용된다.
		backgroundColor: 'green',
		color: 'orange'
	});
})

결과

---

end() : 함수를 연쇄적으로 사용할 경우 이전 선택 요소를 반환.

Q) h3태그 중 짝수인 것은 배경 오랜지 글자색 검정으로

h3태그 중 홀수인 것은 배경 녹색 글자색 검정으로 css적용

$(function(){
	$('h3').filter(':even').css({
		backgroundColor: 'orange',color: 'black'
	}).end().filter(':odd').css({
		backgroundColor: 'green',color: 'black'
	});
})

결과

만약 .end()를 사용하지 않는다면

전체 h3태그가 아닌 filter로 한번 걸러진(배경 오랜지 글자색 검정인) 결과에서 홀수를 찾기 때문에

원하는 홀수번째 h3태그에 css를 적용할 수 없게된다.

$(function(){
	$('h3').filter(':even').css({
		backgroundColor: 'orange',color: 'black'
	}).filter(':odd').css({
		backgroundColor: 'green',color: 'black'
	});
})

결과

---