.filter()


.filter( selector )Возвращает: jQuery

Описание: Reduce the set of matched elements to those that match the selector or pass the function's test.

  • Добавлен в версии: 1.0.filter( selector )

    • selector
      Тип: Selector
      A string containing a selector expression to match the current set of elements against.
  • Добавлен в версии: 1.0.filter( function )

    • function
      Тип: Function( Integer index, Element element ) => Boolean
      A function used as a test for each element in the set. this is the current DOM element.
  • Добавлен в версии: 1.4.filter( elements )

    • elements
      Тип: Element
      One or more DOM elements to match the current set of elements against.
  • Добавлен в версии: 1.4.filter( selection )

    • selection
      Тип: jQuery
      An existing jQuery object to match the current set of elements against.

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

1
2
3
4
5
6
7
8
<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:

1
$( "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).

Using a 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:

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
$( "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.

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:

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

This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (%) to select every item with an index value that, when divided by 3, has a remainder of 2.

Note: When a CSS selector string is passed to .filter(), text and comment nodes will always be removed from the resulting jQuery object during the filtering process. When a specific node or array of nodes are provided, a text or comment node will be included in the resulting jQuery object only if it matches one of the nodes in the filtering array.

Примеры:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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."

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>

Демонстрация:

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

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

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

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