《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()只过滤当前包装集里的元素。

相关文章
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
20 2
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
26 6
|
2月前
|
JavaScript
jQuery 遍历 - 后代
jQuery 遍历 - 后代
16 2
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
3月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
19 1
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
188 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
|
JavaScript 开发者
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
快速学习 jQuery_ 复制元素、DOM 插入到现有元素外
231 0
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
|
JavaScript 前端开发 索引
jQuery学习笔记--效果,操作html元素,遍历DOM树
参考W3school: http://www.w3school.com.cn/jquery/jquery_hide_show.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
1686 0
|
JavaScript
jQuery将元素转为Dom
jquery将选择的元素转为Dom $('#video')[0] 如果元素多的话比如: //可以通过循环遍历元素 for(var x=0;x
719 0