티스토리 뷰

WEB/jQuery

[jQuery] filter()

춘햄 2021. 6. 2. 14:49

jQuery는 기본적으로 공통 요소들에서 특정 요소를 거를 수 있는 filter() 메서드를 가지고 있다.

filter() 메서드는 기본적으로 다음과 같이 사용한다.

$('요소 선택').filter('조건')

예제는 img 태그의 속성에 따라 filtering하는 코드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기</title>

    <style type="text/css">
        .redBorder { border:solid 1px red; }
        .five { border-width:5px; }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			//filter('요소') 걸러내는 함수. => 종료 end(), 필터를 한번 쓸거면 end는 딱히 필요 x, but 여러개 사용 시 필요
			//1. 모든 이미지에 redBorder 스타일 적용
			//2. title='닷넷' 인 요소만 five 적용
			//3. alt = '~~va' 로 끝나는 요소의 스타일 제거
			
			$('img').addClass('redBorder')
			.filter('[title*="닷넷"]').addClass('five')
			.end()
			.filter('[alt$="va"]').removeClass('five')
        });
    </script>
</head>

<body>
	 <img src="" title="닷넷" alt="닷넷" />
	 <img src="" title="자바" alt="자바" />
	 <img src="" title="임베디드" alt="임베디드" />
 </body>

</html>
반응형

'WEB > jQuery' 카테고리의 다른 글

[jQuery] hover()  (0) 2021.06.02
[jQuery] toggle()  (0) 2021.06.02
[jQuery] slice()  (0) 2021.06.02
[jQuery] addClass() & removeClass()  (0) 2021.06.02
[jQuery] jQuery의 기본, 선택자  (0) 2021.06.02
공유하기 링크
Comments
Related Articles more