JQuery

filter

NamGH 2023. 9. 21. 11:47
filter는 선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드

매개변수

selector : 엘리먼트를 추출하기 위한 셀렉터 표현식

function : 엘리먼트를 추출하기 위한 함수

 

 

filter 선택자는 특정 조건에 매치되는 jQuery 집합을 읽어 온다. 

end() 선택자는 filter() 적용 직전의 상태로 이동하고자 할 때 사용하는 함수이다

 

예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		width: 50px;
		height: 50px;
		margin: 10px;
		float: left;
		border : 2px solid green;
	}
</style>
<script src = "../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		/* $('div').css('background', "yellow")
				.filter(".middle")
				.css('border-color', 'red'); */
				
		$('div').css('background', "yellow")
				.filter(function(index){
					return index == 1 || $(this).attr('id') == 'fourth';
				})
				.css('border-color', 'red');
	})
</script>
</head>
<body>
	<div id = "first"></div>
	
	<div id = "second" class = "middle"></div>
	<div id = "third" class = "middle"></div>
	<div id = "fourth" class = "middle"></div>
	<div id = "fifth" class = "middle"></div>
	
	<div id = "sixth"></div>
</body>
</html>

 

결과