jQuery 순회 - filter() 메서드

jQuery 遍历参考手册

예제

모든 div의 색상을 변경하고, "middle" 클래스에 경계선을 추가합니다：

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

직접 테스트해 보세요

정의와 사용법

filter() 메서드는 일치하는 요소 집합을 지정된 선택자와 일치하는 요소 집합으로 줄입니다.

문법

.filter(selector)
매개변수 설명
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과 :odd는 0 기반 인덱스를 사용합니다).

필터 함수 사용

이 메서드의 두 번째 형태는 함수 대신 선택자를 사용하여 요소를 필터링하는 것입니다. 각 요소에 대해 함수가 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');

jQuery 遍历参考手册