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

简介: 注意,现在传递给filter()方法的是一个匿名函数。调用这个函数的上下文与当前元素相同,也就是说当在函数中使用$(this)时,实际应用的是包装器集中的每个DOM元素。在函数中,我将检查包装器集中每个<a>元素的类值(hasClass())是否为external。

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

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包装器集中元素的索引。

相关文章
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
47 10
|
2月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
69 0
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
1月前
|
JavaScript 前端开发
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
80 4
|
1月前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
340 1
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
23 0
|
2月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
36 0