할배

링크 · http://api.jquery.com/filter/

.filter( selector )

.filter( selector )

Description: Reduce the set of matched elements to those that match the selector or pass the function's test.

- 선택자와 일치하는 요소를 줄이거나 함수를 통과합니다.

-- ??

--- (selector) 조건 혹은 함수에 따라 요소들을 걸러낸다/필터링한다는 의미로 받아들이고 있습니다.

version added: 1.0 .filter( selector )

selector

Type: Selector

A string containing a selector expression to match the current set of elements against.

- 선언한 선택자를 가진 요소를 찾는다.

version added: 1.0 .filter( function )

function

Type: Function( Integer index, Element element ) => Boolean

A function used as a test for each element in the set. [this] is the current DOM element.

- 함수에 일치하는 요소를 찾는다.([this]는 현재 DOM element)

version added: 1.4 .filter( elements )

elements

Type: Element

One or more DOM elements to match the current set of elements against.

- 조건과 일치하는 하나 이상의 요소(elements)를 찾는다.

version added: 1.4 .filter( selection )

selection

Type: jQuery

An existing jQuery object to match the current set of elements against.

- 조건과 일치하는 요소(기존 jQuery object)를 찾는다.

Given a jQuery object that represents a set of DOM elements, the .filter() method constructs a new jQuery object from a subset of the matching elements.

- jQuery object로 제공된 DOM 요소집합에서 .filter() 사용하여 매칭된 요소를 새로운 jQuery object로 만듭니다.

The supplied selector is tested against each element;

- 제공된 선택자로 각 요소를 검사합니다.

all elements matching the selector will be included in the result.

- 매칭된 모든 요소를 포함하여 반환합니다.

Consider a page with a simple list on it:

- 단순한 리스트가 주어진 페이지를 검토합시다.

  <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>

We can apply this method to the set of list items:

- 해당 리스트에 아래 함수를 적용시켜 봅니다.

$( "li" ).filter( ":even" ).css( "background-color", "red" );

The result of this call is a red background for items 1, 3, and 5, as they match the selector (recall that :even and :odd use 0-based indexing).

- 해당 함수의 결과로 1,3,5 번째 아이템이 빨강-배경색으로 적용됩니다.

( :even 과 :odd 은 0 을 기준으로 색인하는점을 기억하세요.)

Using a Filter Function

- .filter( function ) 사용

The second form of this method allows us to filter elements against a function rather than a selector.

For each element, if the function returns true (or a "truthy" value), the element will be included in the filtered set;

otherwise, it will be excluded. Suppose we have a somewhat more involved HTML snippet:

- 두번째 방법은 선택자가 아닌 함수를 이용하여 요소를 필터링합니다.

각 요소를 반복하면서 조건이 "참"인 요소를 조건집합에 포함합니다. 다른 경우 제외 될 것입니다.

우리가 가진 어떤 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>

We can select the list items, then filter them based on their contents:

- 우리는 목록을 선택하고 그 내용으로 필터링 할 수 있습니다.

  $( "li" ).filter(function( index ) {
    return $( "strong", this ).length === 1;
  }).css( "background-color", "red" );

This code will alter the first list item only, as it contains exactly one <strong> tag.

Within the filter function, this refers to each DOM element in turn.

The parameter passed to the function tells us the index of that DOM element within the set matched by the jQuery object.

- 이 코드는 단 하나의 <strong> 태그를 가진 항목만 변경 될 것입니다.

필터 함수에서 [this] 키워드는 각 요소들을 한번씩 참조합니다.

저 함수로 매개변수가 전달될 때 우리에게 jQuery object 와 일치하는 DOM 요소의 색인을 알려 줍니다.

We can also take advantage of the index passed through the function, which indicates the 0-based position of the element within the unfiltered set of matched elements:

- 또한 해당 함수를 거쳐진 [index]를 활용 할 수도 있습니다, 이건 0 을 기준으로 조건에 맞지않는 요소들도 포함됩니다.

-- 함수 조건에 필터링 되지않더라도 각 요소들은 0을 기준으로 색인된 값을 가지게됩니다.

$( "li" ).filter(function( index ) {
  return index % 3 === 2;
}).css( "background-color", "red" );

  $( "div" ).filter( document.getElementById( "unique" ) );

jQuery objec 필터링

Select all divs and filter the selection with a jQuery object, keeping only the one with an id of "unique".

- jQuery object를 사용하여 모든 <div> 중에서 <div> 태그의 아이디가 "unique" 인 항목만 필터링합니다.

  $( "div" ).filter( $( "#unique" ) );

예제:

Change the color of all divs; then add a border to those with a "middle" class.

- 모든 <div>의 색상을 변경한다; 클래스명이 "middle" 이면 테두리를 적용한다.

  <!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>

Change the color of all divs; then add a border to the second one (index == 1) and the div with an id of "fourth."

- 모든 <div>의 색상을 변경한다; 인덱스가 1 이거나 요소의 id 가 "fourth" 이면 테두리를 적용한다.

  <!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: 3px white solid;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
  <div id="fourth"></div>
  <div id="fifth"></div>
  <div id="sixth"></div>

  <script>
    $( "div" )
      .css( "background", "#b4b0da" )
      .filter(function( index ) {
        return index === 1 || $( this ).attr( "id" ) === "fourth";
    }).css( "border", "3px double red" );
  </script>

  </body>
  </html>