jQuery 遍历 - filter() 方法 概述
jQuery 2022-06-01 17:59:03小码哥的IT人生shichen
jQuery 遍历 - filter() 方法
实例
改变所有 div 的颜色，然后向类名为 "middle" 的类添加边框：
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px;
margin:5px; float:left;
border:2px white solid; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
语法
.filter(selector)
| 参数 | 描述 |
|---|---|
| selector | 字符串值，包含供匹配当前元素集合的选择器表达式。 |
详细说明
如果给定表示 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');
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>
$('li').filter(':even').css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
此调用的结果是将项目 1, 3, 5 的背景设置为红色，这是因为它们都匹配选择器（回忆一下，:even 和 :odd 均使用基于 0 的 index）。
使用过滤函数
使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 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');