jquery的filter()函式用法程式碼例項

admin發表於2017-03-19
jQueryFilter函式

本章節不會對filter()函式的概念只做簡單的介紹，更多的相關內容可以參閱jQuery filter()方法一章節。

此函式可以對匹配集合中的元素進行過濾，函式filter()的引數可以設定過濾的條件，下面通過程式碼例項做一下簡單介紹。

程式碼例項:

[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(){
  $("#bt").click(function(){
    $("#box li").filter(":eq(2)").css("color","red");
  })
})
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

將第三個li元素的字型顏色設定為紅色，這裡給filter()函式傳遞的是一個字串，也就是一個選擇器。

[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(){
  $("#bt").click(function(){
    $("#box li").filter(function(index){
   if(index%2==0){
     return false
   }
   else{
     return true;
   }
    }).css("color","red");
  })
})
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

在上面的程式碼中，給函式傳遞的是一個函式，此函式會對匹配元素集合中的每一個元素做一次操作。

此引數函式會返回一個布林值，如果為true，則當前元素將會保留在集合中，如果返回值為false，那麼會將當前元素從匹配元素集合中刪除，所以在以上程式碼中，能夠index為奇數的li元素的字型顏色設定為紅色。

相關文章