jQuery参考实例 1.6 在当前选中的元素集中查找下级元素

本文翻译自jQuery Cookbook (O’Reilly 2009) 1.6 Finding Descendant Elements Within the Currently Selected Wrapper Set

需求

在选中一个或几个元素后,需要在这些DOM元素范围内查找下级元素或子元素。

解决方案

从当前几个元素及其下级元素中查找并创建新的元素集,可以用find()方法。比如,有一张包含多个文字段落(<p>)的网页,每个段落中会有一些文字是斜体的(<em>)。如果需要选择所有<p>段落中的<em>元素,可以这么做:

<!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 words');
  </script>
</body>  
</html>  

值得注意的是,上述代码可以直接用jQuery函数来重写,只需将<p>元素集作为上下文参数传给jQuery函数即可:

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

事实上,上面的两种方法一般仅作演示用。更实用也更符合逻辑的做法是使用CSS选择器表达式:

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

讨论

jQuery的find()方法会根据调用该方法的DOM元素及其子元素来查找创建新的元素集。在实际使用中,find()函数很容易与filter()函数混淆。最简单的区分两者的方法是:find()针对的是当前元素集的下级元素或子元素,而filter()针对的是当前元素集本身。换而言之,如果想从当前元素集的下级元素或子元素中查找,find()方法比较合适;而如果想对当前元素集本身进行过滤来获取一个子集,那么filter()方法才是不二之选。更直白的说,find()方法返回的是子元素组成的集合,而filter()方法返回的是当前元素集经过过滤后的子集。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!