.filter (selector) 정보
jQuery .filter (selector)본문
.filter (selector)
설명 : 일치하는 요소 집합을 선택기와 일치하는 요소로 줄이거 나 함수의 테스트를 전달하십시오.
DOM 요소 집합을 나타내는 jQuery 객체가 주어지면이 .filter()메소드는 일치하는 요소의 하위 집합에서 새 jQuery 객체를 생성합니다. 제공된 선택기는 각 요소에 대해 테스트됩니다. 선택기와 일치하는 모든 요소가 결과에 포함됩니다.
간단한 목록이있는 페이지를 고려해보십시오.
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
이 메소드를 목록 항목 집합에 적용 할 수 있습니다.
$( "li" ).filter( ":even" ).css( "background-color", "red" );
이 호출의 결과들은 선택기 일치로 (그 리콜, 아이템 1, 3 및 5 인 붉은 배경 :even과 :odd0 기반 인덱스를 사용하여).
필터 함수 사용
이 메서드의 두 번째 형식은 선택자 라기보다는 함수에 대해 요소를 필터링 할 수있게 해줍니다. 각 요소에 대해 함수가 반환하면 true(또는 "진실"값) 요소가 필터링 된 집합에 포함됩니다. 그렇지 않으면 제외됩니다. 다소 복잡한 HTML 코드 조각이 있다고 가정 해 보겠습니다.
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
목록 항목을 선택한 다음 내용을 기준으로 필터링 할 수 있습니다.
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
이 코드는 정확히 하나의 <strong>태그 만 포함하므로 첫 번째 목록 항목 만 변경합니다 . 필터 함수 내 this에서 차례대로 각 DOM 요소를 참조합니다. 함수에 전달 된 매개 변수는 jQuery 객체와 일치하는 집합 내의 DOM 요소 색인을 알려줍니다.
또한 index통과 된 함수를 활용할 수 있습니다.이 함수는 필터링되지 않은 일치 요소 집합 내에서 요소의 0 기준 위치를 나타냅니다.
$( "li" )
.filter(function( index ) {
return index % 3 === 2;
})
.css( "background-color", "red" );
이 코드를 변경하면 모듈러스 연산자 ( %)를 사용하여 index3으로 나눌 때 나머지 값을 갖는 모든 항목을 선택 하므로 세 번째 및 여섯 번째 목록 항목이 강조 표시됩니다 2.
참고 : CSS 선택자 문자열이 전달 .filter()되면 필터링 프로세스 중에 텍스트 및 주석 노드가 항상 결과 jQuery 객체에서 제거됩니다. 특정 노드 또는 노드 배열이 제공되면 필터링 배열의 노드 중 하나와 일치하는 경우에만 텍스트 또는 주석 노드가 결과 jQuery 객체에 포함됩니다.
예 :
모든 div의 색상을 변경하십시오. 그런 다음 "중간"클래스가있는 사람들에게 테두리를 추가하십시오.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>filter demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
border: 2px white solid;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$( "div" )
.css( "background", "#c8ebcc" )
.filter( ".middle" )
.css( "border-color", "red" );
</script>
</body>
</html>
0
댓글 0개