《jQuery Cookbook中文版》——1.5 过滤DOM元素包装器集
本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.5节,作者:【美】jQuery社区专家组 译者:姚军 , 孙博更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.5 过滤DOM元素包装器集1.5.1 问题
在jQuery包装器集中有一组选中的DOM元素,但是打算从集合中删除不匹配新指定表达式的元素,以创建一个新的操作元素集合。
1.5.2 解决方案
jQuery过滤器方法用于DOM元素的jQuery包装器集,可以排除不符合指定表达式的元素。简言之,可以用filter()方法过滤当前元素集,这是过滤器方法与jQuery查找方法的重要区别,查找方法通过寻找(使用新的选择器变量)新元素(包括当前包装器集的子元素)来缩小DOM元素的包装器集。
为了理解过滤器方法,我们来看看下面的代码:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / /head body a href="#" link /a a href="#" link /a a href="#" /a a href="#" link /a a href="#" link /a a href="#" /a /li a href="#" link /a a href="#" link /a a href="#" link /a a href="#" link /a script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" /script script type="text/JavaScript" //在警告框中显示集合中还有4个元素 alert(jQuery(a).filter(.external).length + external links); /script /body /html
上述代码示例中的HTML页面包含一个有10个元素的网页,其中的外部链接指定了类名external。使用jQuery函数选择页面上的所有
元素。然后,利用过滤器方法删除原始集合中所有class属性值不为external的元素。在filter()方法修改初始DOM元素集之后,调用length属性,该属性会告诉我在应用过滤器之后,新的集合中有多少个元素。
1.5.3 讨论
向filter()方法传递一个用于过滤包装器集的函数也是可行的。前一个代码示例中filter()方法的参数是一个字符串表达式,现在用一个函数来代替它:
alert( jQuery(a) .filter(function(index){ return $(this).hasClass(external);}) .length + external links
注意,现在传递给filter()方法的是一个匿名函数。调用这个函数的上下文与当前元素相同,也就是说当在函数中使用$(this)时,实际应用的是包装器集中的每个DOM元素。在函数中,我将检查包装器集中每个元素的类值(hasClass())是否为external。如果是,返回逻辑真值,该元素保留在集合中;否则(返回逻辑假值),从集合中删除元素。也可以这么理解:如果函数返回假值,则删除该元素。如果函数返回其他值,该元素就会留在包装器集中。
你可能已经注意到:这里向函数传递了一个名为index的参数,但是并不打算使用它。在必要的时候,这个参数可用来以数字形式指出jQuery包装器集中元素的索引。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- JQuery基础-- Ajax
- JQuery 获得元素的方法
- jQuery分页插件(jquery.page.js)的使用
- 使用jquery-webcam插件,实现人脸采集并转base64
- js jquery - 获取元素(父节点,子节点,兄弟节点),元素筛选 (转载)
- jQuery操作DOM元素案例
- jquery资源
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
- 利用Jquery实现http长连接(LongPoll) {转}
- 电子签章盖章之jQuery插件jquery.zsign
- JQuery模板插件jquery.tmpl-动态ajax扩展
- 电子签章盖章之jQuery插件jquery.zsign
- js jquery第一个元素
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
- Js/Jquery获取iframe中的元素
- 引入jQuery的src设置
- jQuery DOM 元素方法
- jQuery 操作 CSS
- jQuery 元素选择器
- jQuery on()绑定动态元素出现的问题小结
- jQuery(三)添加/删除/替换/克隆元素、事件
- jQuery(二)修改元素、查找元素
- jquery多图片上传预览demo效果示例(整理)