jquery .filter()过滤器
述: 筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。
.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对象的子集。所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。
考虑一个页面上一个简单的列表:
<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');
该调用的结果是1,3,和5项的背景变为红色,因为他们匹配这个选择器(记得:even 和 :odd使用基于0的索引)。
Using a Filter Function(使用过滤函数)
这种方法的第二种形式允许我们使用一个函数,而不是一个选择器来过滤元素,对于每个元素,如果函数返回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'
此代码只有第一个列表项将改变,因为它仅包含一个<strong>
标签。过滤函数中的this
是依次指向每个DOM元素。过滤函数中传入的 index 参数代表匹配的 jQuery 对象集合中 DOM 元素的索引。
我们可以利用过滤函数中的 index
参数,该参数是从 0 开始的索引值,此索引值代表未经过滤的匹配元素集合中的元素位置:
$('li').filter(function(index) {
return index % 3 == 2;
}).css('background-color', 'red');
这对代码将会导致第三和第六列表项背景变为红色,因为它使用模运算符( %
)选择每一个项目和index
值,除以3时,余2
。
例子:
Example: 改变所有 div 的颜色,然后为含有 "middle" 样式的 div 添加边框。
<!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.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>
Example: C改变所有 div 的颜色,然后为第二个 div (index == 1) 及 id 为 "fourth" 的 div 添加边框。
<!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.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>
Example: 选择所有的 div,并使用 DOM 元素进行筛选,过滤出 id 为 "unique" 的元素。
1
|
$("div").filter( document.getElementById("unique") ) |
Example: 选择所有的 div,并使用 jQuery 对象进行筛选,过滤出 id 为 "unique" 的元素。
1
|
$("div").filter( $("#unique") ) |
jquery .filter()过滤器的更多相关文章
- filter 过滤器从数组中选择一个子集
输入过滤器可以通过一个管道字符和一个过滤器添加到指令中,该过滤器后面跟着一个冒号:冒号后面是一个模型名称. <!DOCTYPE html><html><head>& ...
- filter 过滤器(监听)
Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...
- Java防止SQL注入2(通过filter过滤器功能进行拦截)
首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...
- Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- javaweb学习总结(四十二)——Filter(过滤器)学习
一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...
- Filter过滤器简单应用( 接口访问控制 )
一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...
- 如何配置Filter过滤器处理JSP中文乱码
参考Tomcat服务器目录webapps的examples示例 简单配置步骤:1.在项目web.xml文件添加过滤器标记<filter>和<filter-mapping>:2. ...
- Filter(过滤器)常见应用
孤傲苍狼 只为成功找方法,不为失败找借口! javaweb学习总结(四十六)——Filter(过滤器)常见应用 一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html F ...
- Filter过滤器(1)
Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...
随机推荐
- POJ 3660 Cow Contest
题目链接:http://poj.org/problem?id=3660 Cow Contest Time Limit: 1000MS Memory Limit: 65536K Total Subm ...
- 2015GitWebRTC编译实录2
2015.07.17libyuvneon编译通过,可能需要验证才行.先继续下一个lib commonaudio[170/1600 ] CXX obj /webrtc/common_audio/comm ...
- UVa 1394 约瑟夫问题的变形
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- docker容器互联
link方式 http://blog.csdn.net/halcyonbaby/article/details/42112325 通过link方式创建容器,然后我们可以使用被link容器的别名进行访问 ...
- AXIOM解析XML 详细原理
转自:http://warlaze.blog.sohu.com/58477971.html AXIOM Axis对象模型(AXIOM)是一个XML对象模型,设计用于提高XML处理期间的内存的使用率和性 ...
- Javascript中最常用的61段经典代码
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...
- DYNAMIC_DOWNCAST、STATIC_DOWNCAST、CRuntimeClass和IsKindOf
DYNAMIC_DOWNCAST.STATIC_DOWNCAST.CRuntimeClass和IsKindOf DYNAMIC_DOWNCAST(class, pointer ):如果pointe ...
- Python元组的简单介绍
1.实际上元组是跟列表非常相近的另一种容器类型.元组和列表看上去的不同的一点是元组用圆括号而列表用方括号.而在功能上,元组是一种不可变的类型.正是因为这个原因,元组可以做一些列表不可以做的事情,比如用 ...
- sql compact 使用EF无法更新的问题?
1.问题一是表中没有主键会报一些莫名其妙的错误. 2.数据库文件被默认复制到了Debug/Release目录,实际调试或运行时发现原有数据库没有被更新.
- noip2011普及组——统计单词数
统计单词数 时间限制:1 s 内存限制:128MB [问题描述]一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实 ...