开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《jQuery Cookbook中文版》——1.6 查找当前选择包装器集中的后代元素

简介: jQuery .find()方法可以用于根据当前DOM元素集及其子元素的上下文创建新的元素集。人们往往混淆filter()和.find()方法的用法。记住两者差异的最简手段是记住.find()将操作/选择当前集合的子元素,而.filter()只操作当前元素集。
+关注继续查看

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.6节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.6 查找当前选择包装器集中的后代元素

1.6.1 问题
你选择了一组(或者一个)DOM元素,希望在当前选中元素的上下文中找到后代(子)元素。

1.6.2 解决方案
使用.find()方法,根据当前集合及其后代的上下文创建一个新的元素包装器集。例如,假设你有一个包含多个段落的网页,这些段落中封装的是需要强调(以斜体显示)的单词。如果你只想选择

元素中包含的元素,可以使用如下代码:

<!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>
<p>Ut ad videntur facilisis <em>elit</em> cum. Nibh insitam erat facit
<em>saepius</em> magna. Nam ex liber iriure et imperdiet. Et mirum eros
iis te habent. </p>
<p>Claram claritatem eu amet dignissim magna. Dignissim quam elit facer eros
illum. Et qui ex esse <em>tincidunt</em> anteposuerit. Nulla nam odio ii
vulputate feugait.</p>
<p>In quis <em>laoreet</em> te legunt euismod. Claritatem <em>consuetudium</em>
wisi sit velit facilisi.</p>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 //在警告框中显示<p>元素中找到的斜体单词总数
    alert('The three paragraphs in all contain ' +
    jQuery('p').find('em').length + '
italic elements');
</script>
</body>
</html>

记住,也可以改写上述代码,将上下文引用作为jQuery函数的第二个参数:

alert('The three paragraphs in all contain ' + jQuery('em',$('p')).length +
' italic elements');

此外,值得一提的是,最后这两个代码示例只是为了说明的目的而编写的。使用CSS选择器表达式选择包含在

元素(祖先)中的斜体元素(后代)即使不实用,也是更符合逻辑的。

alert('The three paragraphs in all contain ' + jQuery('p em').length +
' italic elements');

1.6.3 讨论
jQuery .find()方法可以用于根据当前DOM元素集及其子元素的上下文创建新的元素集。人们往往混淆filter()和.find()方法的用法。记住两者差异的最简手段是记住.find()将操作/选择当前集合的子元素,而.filter()只操作当前元素集。换句话说,如果你想将当前包装器集当作上下文,进一步选择集合中元素的子元素,从而改变当前的包装器集,就应该使用.find()。如果你只想过滤当前包装集,获得集合中当前DOM元素的一个新子集,则使用.filter()。归纳起来就是:find()返回子元素,而filter()只过滤当前包装集里的元素。

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

相关文章
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1020 0
40款非常棒的 jQuery 插件和制作教程(系列一)
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
820 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
942 0
《jQuery Cookbook中文版》——第1章 jQuery基础1.1 在HTML页面中包含jQuery程序库代码
你当然也可以自己安装一个jQuery代码副本。但是,在大部分情况下这很愚蠢,因为Google已经为你托管了一个很好的版本。使用Google托管的jQuery,你可以得益于一个可靠、高速且在全球都能访问的jQuery版本。而且,你还能够受益于降低的延迟、获得更高的并行性和更好的缓存。
1552 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载