实例

改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:

$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");

定义和用法

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

语法

.filter(selector)

使用过滤函数

使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 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');

jQuery遍历 filter()方法的更多相关文章

  1. jQuery 遍历 - parent() 方法

    ylbtech-jQuery-sizzle:jQuery 遍历 - parent() 方法  parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的. 1.A,jQuer ...

  2. jQuery 遍历 - eq() 方法 查找当前元素

    jQuery 遍历 - eq() 方法 if(data[i].status !='已送达'){ $('.w-beget').eq(i).attr('disabled','disabled'); }

  3. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  4. jQuery 遍历 - siblings() 方法

    本文来自:http://www.w3school.com.cn/jquery/traversing_siblings.asp jQuery 遍历参考手册 实例 查找每个 p 元素的所有类名为 &quo ...

  5. 模仿jQuery的filter方法

    对这类方法挺感兴趣的,因为方法的回调函数的返回值和jQuery变量好像没有什么关系.看了filter方法的源代码后,我就模仿了这个方法,自定义两个jQuery方法:some和every,类似于ES5新 ...

  6. jQuery遍历节点方法汇总

    1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...

  7. jquery遍历-filter()

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery 遍历 - closest() 方法

    jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...

  9. jQuery 遍历 - children() 方法

    jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...

随机推荐

  1. 中期ppt制作

    陀螺仪的使用解释:https://zhuanlan.zhihu.com/p/29244429 手机坐标轴的图片:http://jcjs.siat.ac.cn/ch/reader/create_pdf. ...

  2. svn: 处于冲突状态

    svn: 提交失败(细节如下):svn: 提交终止: “/home/usa/svn/aispeech/air201102/branches/opt-vite/wvite” 处于冲突状态 删除文件夹wv ...

  3. 第16章 STM32中断应用概览—零死角玩转STM32-F429系列

    第16章     STM32中断应用概览 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fi ...

  4. data-ng-init 指令

    1.data-ng-init指令为AngularJS应用程序定义了一个初始值. 2.通常情况下,data-ng-init指令并不常用,将会使用控制器或模块来代替它.

  5. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  6. 一篇RxJava友好的文章(三)

    组合操作符 继上一篇讲述了过滤操作符,这一篇讲述组合操作符,组合操作符可用于组合多个Observable.组合操作符相对于过滤操作符要复杂很多,也较难以理解,需要花费时间去看文档查资料,写demo才能 ...

  7. Oracle必备知识.

    一.基本数据类型 1.字符数据类型 char    varchar2    long 三者区别:  I.char固定长度字符串,存储字母数字值,列长度可以是 1 到 2000 个字节. II.varc ...

  8. ref是什么?

    ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件. 因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM,只有当它真正 ...

  9. js一键复制到剪切板

    <div id='demo'>我就是被复制的内容<span>点击复制<span></div> $('#demo').on('click','span', ...

  10. 初探12C碰到的那些“坑”

    一个昏天黑地的早上,刚搭建的系统忽然遭遇严重数据库问题.于是,主要人物闪亮登场了,他们分别是友商人员小灰和DBA小Y. 事情的开始,小Y接到小灰紧急救助电话... 小灰:小Y,我是友商的小灰,刚搭建的 ...