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

本文翻译自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()方法返回的是当前元素集经过过滤后的子集。

补充：web前端 , JavaScript ,