开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

简介:
+关注继续查看

has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集。

下面举一个例子:

 

复制代码
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
复制代码

jquery代码:

$('li').has('span').css('background-color', 'red');

效果:

这个例子可以看出:在匹配li时,要检查该li的后代元素中是否包含了span,如果包含,则该元素包含在结果中。如果不包含,那么就排除。

注意:has只起判断作用。以has参数中的选择器或DOM元素做为条件,检测原结果集中的元素是否符合。去掉不符合的元素,将符合的元素构成一个新结果集。

这与find()方法不同,find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。

$('li').find('span').css('background-color', 'red');

结果为:

 

filter()方法与has()方法中的参数,都是过滤条件。不同的是filter()方法,条件作用于自身;has()方法条件是作用于它的后代元素中。

以下面的例子为例:filter()方法中,条件作用于自身li,has()方法条件是作用于li的后代元素

复制代码
<ul>
  <li class="a">list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
复制代码

jQuery代码:

$('li').filter('.a').css('background-color', 'red');

结果为:



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3424424.html如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery find 和 filter 方法的区别
jQuery find 和 filter 方法的区别
26 0
jQuery图像查看插件Zoom.js
jQuery图像查看插件Zoom.js
149 0
16个非常酷的jQuery插件
16个非常酷的jQuery插件
38 0
基于jQuery的tooltips插件--poshytip
基于jQuery的tooltips插件--poshytip
78 0
推荐几个jquery实用的插件
虽然jquery在最近几年没有之前那几年火,但是有很多公司还是用它的,这里我向大家推荐几个实用的jquery插件。
30 0
自制jQuery标签插件
在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件。最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控。初步在IE6 7 8,firefox,chrome中做了测试,可以通过。
36 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载