述: 筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。
-
.filter( selector )
-
selector类型: Selector一个用于匹配元素的选择器字符串。
-
-
.filter( function(index) )
-
function(index)类型: Function()一个函数用作测试集合中的每个元素。
this是当前DOM元素。
-
-
.filter( element )
-
element类型: Element一个或多个DOM元素来匹配当前元素集合。
-
-
.filter( jQuery object )
-
jQuery object类型: Object现有jQuery对象，用于进一步筛选当前元素集合。
-
如果一个jQuery对象表示一个DOM元素的集合，.filter()方法构造了一个新的jQuery对象的子集。所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。
考虑一个页面上一个简单的列表：
1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li>list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 <li>list item 6</li> 8 </ul>
我们可以在列表项目上设置此方法：
1 $('li').filter(':even').css('background-color', 'red');
该调用的结果是1，3，和5项的背景变为红色，因为他们匹配这个选择器（记得:even 和 :odd使用基于0的索引）。
Using a Filter Function（使用过滤函数）
这种方法的第二种形式允许我们使用一个函数，而不是一个选择器来过滤元素，对于每个元素，如果函数返回true ，该元素将被包含在筛选集合中;否则，将被排除在外。假设我们有一个HTML片段：
1 <ul> 2 <li><strong>list</strong> item 1 - one strong tag</li> 3 <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> 4 <li>list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 <li>list item 6</li> 8 </ul>
我们可以选择列表项，然后过滤它们的内容：
1 $('li').filter(function(index) { 2 return $('strong', this).length == 1; 3 }).css('background-color', 'red'
此代码只有第一个列表项将改变，因为它仅包含一个<strong>标签。过滤函数中的this是依次指向每个DOM元素。过滤函数中传入的 index 参数代表匹配的 jQuery 对象集合中 DOM 元素的索引。
我们可以利用过滤函数中的 index 参数，该参数是从 0 开始的索引值，此索引值代表未经过滤的匹配元素集合中的元素位置：
1 $('li').filter(function(index) { 2 return index % 3 == 2; 3 }).css('background-color', 'red');
这对代码将会导致第三和第六列表项背景变为红色，因为它使用模运算符（ % ）选择每一个项目和index值，除以3时，余2 。
例子:
Example: 改变所有 div 的颜色，然后为含有 "middle" 样式的 div 添加边框。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { width:60px; height:60px; margin:5px; float:left; 6 border:2px white solid;} 7 </style> 8 <script src="http://code.jquery.com/jquery-latest.js"></script> 9 </head> 10 <body> 11 <div></div> 12 <div class="middle"></div> 13 <div class="middle"></div> 14 <div class="middle"></div> 15 <div class="middle"></div> 16 <div></div> 17 <script> 18 $("div").css("background", "#c8ebcc") 19 .filter(".middle") 20 .css("border-color", "red"); 21 </script> 22 23 </body> 24 </html>
Example: C改变所有 div 的颜色，然后为第二个 div (index == 1) 及 id 为 "fourth" 的 div 添加边框。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { width:60px; height:60px; margin:5px; float:left; 6 border:3px white solid; } 7 </style> 8 <script src="http://code.jquery.com/jquery-latest.js"></script> 9 </head> 10 <body> 11 <div id="first"></div> 12 <div id="second"></div> 13 <div id="third"></div> 14 <div id="fourth"></div> 15 <div id="fifth"></div> 16 <div id="sixth"></div> 17 <script> 18 $("div").css("background", "#b4b0da") 19 .filter(function (index) { 20 return index == 1 || $(this).attr("id") == "fourth"; 21 }) 22 .css("border", "3px double red"); 23 24 </script> 25 </body> 26 </html>
Example: 选择所有的 div，并使用 DOM 元素进行筛选，过滤出 id 为 "unique" 的元素。
|
1
|
$("div").filter( document.getElementById("unique") ) |
Example: 选择所有的 div，并使用 jQuery 对象进行筛选，过滤出 id 为 "unique" 的元素。
|
1
|
$("div").filter( $("#unique") ) |