filter() 예제
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".hz").css("background-color", "yellow");
});
</script>
<p class="hz">홈짱닷컴</p>
<p class="hz">Homzzang.com</p>
<p>홈페이지 제작관리강의 + 그누보드강의</p>
결과보기
filter() 정의
특정기준과 일치하는 요소 반환.
1.
기준을 지정 후 기준과 일치하는 것만 반환시킴.
2.
종종 선택한 요소 그룹에서 요소 검색 범위를 좁히는 데 사용.
3.
filter() 메소드는 not() 메소드와 반대.
4.
find() 메서드
filter() 구문
$(selector ).filter(criteria,function(index) )
[매개변수]
c riteria
선택. 선택된 요소 그룹에서 반환할 선택자 표현식. jQuery 객체 또는 하나 이상의 요소 지정.
여러 기준 지정하려면, 쉼표 (,) 사용.
function(index)
선택. 세트의 각 요소에 대해 실행할 함수를 지정.
true를 반환하면 요소가 유지. 그렇지 않으면 요소가 제거됨.
index - 세트 내의 요소의 인덱스 위치.
참고 : 이것은 현재 DOM 요소임.
filter() 예제2 - 여러가지 기준
2-1.
가상선택자 : 짝수번째 p요소
$("p").filter(":even").css("background-color", "yellow");
2-2.
다중기준 : 클래스가 hz이거나 아이디가 hz인 모든 모든 p요소
$("p").filter(".hz,#hz").css("background-color", "yellow");
2-3.
jQuery 객체 : div 요소의 자손 중 클래스가 hz인 모든 p요소
$("p").filter($("div p.hz")).css("background-color", "yellow");
2-4.
DOM : 아이디가 hz인 p요소
$("p").filter(document.getElementById("hz")).css("background-color", "yellow");
2-5.
함수 : 자식요소로 span 요소를 2개 갖고 있는 p요소 (= 자식요소소유개수선택자 = 자식개수선택자 )
$("p").filter(function(){
return $("span", this).length == 2;}).css("background-color", "yellow");
filter() 예제2-5 - 자식요소소유개수선택자 예제
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(function(){
return $("span", this).length == 2;}).css("background-color", "yellow");
});
</script>
<div>
<p>span 1개 - <span>홈짱닷컴</span></p>
<p>span 2개 - <span>홈짱닷컴</span> <span>Homzzang.com</span></p>
<p>span 1개 - <span>홈짱닷컴</span></p>
<p>span 2개 - <span>홈짱닷컴</span> <span>Homzzang.com</span></p>
<p>span 0개</p>
</div>
결과보기
주소 복사
랜덤 이동