《jQuery Cookbook中文版》——1.5 过滤DOM元素包装器集

1.5 过滤DOM元素包装器集

1.5.1 问题
在jQuery包装器集中有一组选中的DOM元素,但是打算从集合中删除不匹配新指定表达式的元素,以创建一个新的操作元素集合。

1.5.2 解决方案
jQuery过滤器方法用于DOM元素的jQuery包装器集,可以排除不符合指定表达式的元素。简言之,可以用filter()方法过滤当前元素集,这是过滤器方法与jQuery查找方法的重要区别,查找方法通过寻找(使用新的选择器变量)新元素(包括当前包装器集的子元素)来缩小DOM元素的包装器集。

为了理解过滤器方法,我们来看看下面的代码:

<!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>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a>
<a href="#" class="external">link</a>
<a href="#" class="external">link</a>
<a href="#"></a></li>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
   //在警告框中显示集合中还有4个元素
     alert(jQuery('a').filter('.external').length + ' external links');
</script>
</body>
</html>

上述代码示例中的HTML页面包含一个有10个元素的网页,其中的外部链接指定了类名external。使用jQuery函数选择页面上的所有元素。然后,利用过滤器方法删除原始集合中所有class属性值不为external的元素。在filter()方法修改初始DOM元素集之后,调用length属性,该属性会告诉我在应用过滤器之后,新的集合中有多少个元素。

1.5.3 讨论
向filter()方法传递一个用于过滤包装器集的函数也是可行的。前一个代码示例中filter()方法的参数是一个字符串表达式,现在用一个函数来代替它:

alert(
  jQuery('a')
    .filter(function(index){ return $(this).hasClass('external');})
    .length + ' external links'
);

注意,现在传递给filter()方法的是一个匿名函数。调用这个函数的上下文与当前元素相同,也就是说当在函数中使用$(this)时,实际应用的是包装器集中的每个DOM元素。在函数中,我将检查包装器集中每个元素的类值(hasClass())是否为external。如果是,返回逻辑真值,该元素保留在集合中;否则(返回逻辑假值),从集合中删除元素。也可以这么理解:如果函数返回假值,则删除该元素。如果函数返回其他值,该元素就会留在包装器集中。

你可能已经注意到:这里向函数传递了一个名为index的参数,但是并不打算使用它。在必要的时候,这个参数可用来以数字形式指出jQuery包装器集中元素的索引。

时间: 2024-08-03 02:36:51

《jQuery Cookbook中文版》——1.5 过滤DOM元素包装器集的相关文章

《jQuery Cookbook中文版》——1.8 将前一个选择集包含到当前选择集

1.8 将前一个选择集包含到当前选择集 1.8.1 问题你刚刚对一组元素进行操纵,获得新的元素集.但是,你想同时操作前一个元素集和当前元素集. 1.8.2 解决方案可以用andSelf()方法合并前一个DOM元素选择集和当前选择集.例如,在下面的代码中,首先选择页面上的所有< div>元素.接下来,操纵这组元素,寻找< div>元素中的所有< p>元素.现在,为了同时操作< div>和< div>中找到的< p>元素,可以用andSe

《jQuery Cookbook中文版》——导读

前言 jQuery程序库给前端开发带来了一场风暴.它极其简单的语法使曾经很复杂的任务变得轻松愉快.许多开发人员很快就为它的优雅和清晰而着迷.如果你已经开始使用这个程序库,你就已经将丰富而具有交互性的体验加入到你的项目中. jQuery的入门非常容易,但是和许多用于开发网站的工具一样,完全体会到它的广度和深度需要花费几个月甚至几年的时间.这个程序库充满了你从未想象过的特性.一旦你了解了这些特性,这些特性就能够戏剧性地改变你解决问题的方法. 本书旨在向亲爱的读者展示业界领先的前端开发人员在日常项目中

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

1.6 查找当前选择包装器集中的后代元素 1.6.1 问题你选择了一组(或者一个)DOM元素,希望在当前选中元素的上下文中找到后代(子)元素. 1.6.2 解决方案使用.find()方法,根据当前集合及其后代的上下文创建一个新的元素包装器集.例如,假设你有一个包含多个段落的网页,这些段落中封装的是需要强调(以斜体显示)的单词.如果你只想选择 元素中包含的元素,可以使用如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集

1.9 根据当前上下文遍历DOM获得新的DOM元素集 1.9.1 问题你已经选择了一组DOM元素,根据选择集在DOM结构树中的位置,你打算遍历DOM获得一个新的元素集以供操作. 1.9.2 解决方案jQuery提供一组方法,可以根据当前选择的DOM元素的上下文遍历DOM. 例如,查看如下的HTML片段: <div> <ul> <li><a href="#">link</a></li> <li><a

《jQuery Cookbook中文版》——1.3 用选择器和jQuery函数选择DOM元素

1.3 用选择器和jQuery函数选择DOM元素 1.3.1 问题你需要选择一个DOM元素或者一组DOM元素,以便用jQuery方法作用于这些元素. 1.3.2 解决方案当你需要从DOM中选择元素时,jQuery提供两种备选方案.这两种选项都要求使用jQuery函数(jQuery()或其别名$()).第一种选项使用CSS选择器和自定义选择器,这是最常用和最清晰的解决方案.通过向jQuery函数传递一个包含选择器表达式的字符串参数,该函数将遍历DOM并查找表达式定义的DOM节点.下面的代码是一个例

《jQuery Cookbook中文版》——第1章 jQuery基础1.0 导言

第1章 jQuery基础 1.0 导言 既然你已经选择了一本有关jQuery的"食谱",本书作者基本就可以假定你对jQuery的定义和功能有了大致的认识.坦白说,"食谱"通常是为寻求加强已有知识基础的读者所编写的.因此,本书使用了问题-解决方案-讨论的编排方式,快速地介绍常见问题的解决方案.但是,如果你是一位jQuery新手,不要把本书抛诸脑后,认为第1章是老生常谈,这一章就是专为新手所写的. 如果你需要复习,或者只有很少或者完全没有jQuery的知识,第1章将帮助

《jQuery Cookbook中文版》——1.11 删除DOM元素

1.11 删除DOM元素 1.11.1 问题 你想从DOM中删除元素. 1.11.2 解决方案 remove()方法可以用于从DOM中删除选中的元素集及其子元素.请看如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <h

《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素

1.10 创建.操作和插入DOM元素 1.10.1 问题 你打算创建一个或者多个新的DOM元素,立刻选中这些元素加以操作,然后把它们注入到DOM中. 1.10.2 解决方案 你可能还不清楚,jQuery函数是多功能的,根据你发送的不同参数结构,一个函数能以不同的方式运行.如果以原始HTML文本字符串为参数调用函数,它将立刻创建这些元素.例如,下列语句将创建一个包装在< p>元素中的< a>元素,在< p>和< a>元素中还封装了一个文本节点: jQuery(

《jQuery Cookbook中文版》——1.13 克隆DOM元素

1.13 克隆DOM元素 1.13.1 问题 你需要克隆/复制DOM的一部分. 1.13.2 解决方案 jQuery提供clone()方法复制DOM元素.它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了.结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素.在下面的代码中,将克隆一个< ul>元素,然后用插入方法appendTo()将这个副本附加到DOM中.实际上,在页面上插入了与现有的< ul>完全相同的一个