jQuery 过滤方法filter()选择具有特殊属性的元素

程序员文章站 2023-11-22 16:26:16

现在有这样一种需求,需要选出所有有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完成这个问题了. 使用jquery的dom过滤方法filter(),可以根据函数中...

现在有这样一种需求,需要选出所有有背景图片的元素.
这个问题有点棘手.我们无法使用选择表达式来完成这个问题了.
使用jquery的dom过滤方法filter(),可以根据函数中表达的任何条件选择元素.

jquery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数.
或者传递的是一个函数.它的返回值将定义某个元素是否被选中.
传递的函数将对当前选择集中的每个元素运行.
当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素
不受影响.

. 代码如下:

jquery('*').filter(function(){
return !!jquery(this).css('background');
});

上述代码选择所有具有背景图片的元素.
初始集合是所有元素(*).然后以一个函数为参数调用filter().
这个函数在每个集合上进行是否有属性background属性的判断,
如果有,则保留.否则,则在结果集中删除这个元素.

你所看到的!! 是javascript中间任何undefined ,空类型,当然还有false.
如果函数调用返回的是这些值,那么函数返回false,从而在集合中删除

没有background属性的元素.
实际上,!!并不是必要的.因为jquery将把这些返回值转化为boolean类型.但是保留仍然是一个好的主意.
这样任何人看到你的代码的时候,都能绝对肯定你的意图.(这有助于代码的可读性).

在传递个filter()的函数中,可以通过this关键字引用当前元素.
将它包含在jquery函数中就变成了一个jquery对象了.
this //常规的元素对象.
jquery(this) //jquery对象.
下面是激发你想象力的一些例子.

. 代码如下:

jquery('p').filter(function(){
var width = jquery(this).width;
return width >100 && widht < 200;
});
//返回子元素有10个或者20个的元素.
jquery('*').filter(function(){
var children = jquery(this).childern().length;
return children ===10 || children ===20;

});

下面是一个代码例子：判断有背景颜色的元素，并将它们的背景颜色全部改为黑色。

. 代码如下:

<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<p class="c1">bye bye beautiful</p>
<p class="c2">nothing but the girl</p>
<p>the lazy song</p>
<h2>if i die young</h2>
<h3>new soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jquery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>

上一篇： Linux使用logrotate来切割日志文件

下一篇： jquery列表拖动排列(由项目提取相当好用)

jQuery 过滤方法filter()选择具有特殊属性的元素