.filter()
.filter( selector )
描述：把匹配元素的集合缩小到只剩下匹配选择器的那些元素，或者通得过函数测试的那些元素。
- selector类型：Selector一个包含选择器表达式的字符串，用来匹配所针对的当前元素集合中的元素。
- elements类型：Element一个或多个DOM元素，用来匹配所针对的当前元素集合。
- selection类型：jQuery一个已有的jQuery对象，用来匹配所针对的当前元素集合中的元素。
给定一个代表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使用基于1的索引）。
使用一个筛选器函数
该方法的第二种形式允许我们根据一个函数而不是根据一个选择器筛选元素。对于每个元素，如果函数返回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，它表示在未筛选的匹配的元素集合内部的元素的基于零的位置。
$( "li" )
.filter(function( index ) {
return index % 3 === 2;
})
.css( "background-color", "red" );
对代码的此更改将导致第三和第六个列表项目被高亮显示，因为它使用了取模操作符（%）来选择每个条目的index值，当这个值除以3时，有余数2。
示例
改变所有div的颜色；然后给带有“middle”类的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>
演示结果
改变所有的div的字色；然后向第二个div（index==1）以及带有id“fourth”的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: 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>
演示结果
选择所有的div，并用一个DOM元素筛选选区，，保留唯一的带有id“unique”的元素。
$( "div" ).filter( document.getElementById( "unique" ) );
选择所有的div，并用一个jQuery对象筛选选区，保留唯一的带有id“unique”的元素。
$( "div" ).filter( $( "#unique" ) );