jQuery filter() 用法簡單介紹

螞蟻小編發表於2017-03-16
jQueryFilter

filter()函式從名字上來看就是具有"過濾"的意思，此函式確實具有此功能，下面就介紹一下它是如何進行過濾的。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
$(selector).filter(expression)

可以通過表示式expression(就是一個選擇器)過濾selector選擇器匹配的元素集合。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#box li").filter(":odd")
  .css("color","red");
})
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
  <li>螞蟻部落六</li>
</ul>
</body> 
</html>

以上程式碼可以將偶數行li元素的字型顏色設定為紅色。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
$(selector).filter(func)

這是通過函式而不是選擇器來對selector選擇器匹配的元素集合進行過濾,如果返回值是true，則元素會被包含在匹配元素集合中，如果為false則將元素排除在集合之外。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#box li").filter(function(index){
    if(index%2==0){
      return true;
    }
  }).css("color","red");
})
</script> 
</head> 
<body> 
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
  <li>螞蟻部落六</li>
</ul>
</body> 
</html>

以上程式碼可以將li元素中奇數行字型顏色設定為紅色，index是當前元素的索引，索引是從零開始的。

相關文章