.filter()
.filter( selector ) 返回： jQuery
描述： 篩選出與指定表達(dá)式匹配的元素集合。
-
version added: 1.0.filter( selector )
selector選擇器字符串，用于確定到哪個(gè)前輩元素時(shí)停止匹配。
-
version added: 1.0.filter( function(index) )
function(index)一個(gè)作為每個(gè)集合中的元素測(cè)試的函數(shù)。
this是當(dāng)前的DOM元素。 -
version added: 1.4.filter( element )
element一個(gè)匹配當(dāng)前元素集合的元素。
-
version added: 1.4.filter( jQuery object )
jQuery object現(xiàn)有匹配當(dāng)前元素集合的jQuery對(duì)象。
如果一個(gè)jQuery對(duì)象表示一個(gè)DOM元素的集合，.filter()方法構(gòu)造了一個(gè)新的jQuery對(duì)象的子集。所提供的選擇器是對(duì)每個(gè)元素進(jìn)行測(cè)試;選擇匹配的所有元素將包含在結(jié)果中。
考慮一個(gè)頁(yè)面上一個(gè)簡(jiǎn)單的列表：
<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>
我們可以在列表項(xiàng)目上設(shè)置此方法：
$('li').filter(':even').css('background-color', 'red');
該調(diào)用的結(jié)果是項(xiàng)目的1，3，和5的背景給為紅色，因?yàn)樗麄冞x擇匹配（記得:even 和 :odd使用基于0的索引）。
使用過(guò)濾函數(shù)
這種方法的第二種形式允許我們使用一個(gè)函數(shù)，而不是一個(gè)選擇器來(lái)過(guò)濾元素，對(duì)于每個(gè)元素，如果函數(shù)返回true ，該元素將被包含在篩選集合中;否則，將被排除在外。假設(shè)我們有一個(gè)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>
我們可以選擇列表項(xiàng)，然后過(guò)濾它們的內(nèi)容：
$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red');
此代碼只有第一個(gè)列表項(xiàng)將改變，因?yàn)樗鼉H包含一個(gè)標(biāo)記。用過(guò)濾函數(shù)，this是指依次的每個(gè)DOM元素。這個(gè)參數(shù)傳遞給函數(shù)告訴我們?cè)揇OM元素在匹配的jQuery對(duì)象集合內(nèi)的索引。
我們還可以拿index傳遞給貫穿函數(shù)，這表明基于0的元素的位置在匹配的元素中未濾過(guò)的:
$('li').filter(function(index) {
return index % 3 == 2;
}).css('background-color', 'red');
這對(duì)代碼將會(huì)導(dǎo)致第三和第六列表項(xiàng)背景變?yōu)榧t色，因?yàn)樗褂媚＿\(yùn)算符（ % ）選擇每一個(gè)項(xiàng)目和index值，除以3時(shí)，有一個(gè)剩余2 。
Examples:
Example: Change the color of all divs then put a border around only some of them.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:2px white solid;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.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>Demo:
Example: Selects all paragraphs and removes those without a class "selected".
$("p").filter(".selected")Example: Selects all paragraphs and removes those that aren't of class "selected" or the first one.
$("p").filter(".selected, :first")Example: Change the color of all divs then put a border to specific ones.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:3px white solid; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.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>Demo:
Example: Remove all elements that have a descendant ol element
$("div").filter(function(index) {
return $("ol", this).length == 0;
});