JQuery filter()与find()的用法及实例 -

bijian1013

浏览: 3188112 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery filter()与find()的用法及实例

博客分类：

JQuery

jquery filter find

　　JQuery的find()方法与filter()方法对于初学者来说容易混淆，在这里对这两个方法通过一个小例子来进行比较和说明，旨在了解这两种方法的区别。

一.find使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>find使用</title>
<script src="lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<div class="css">
		<p class="rain">测试1</p>
	</div>
	<div class="rain">
		<p>测试2</p>
	</div>
<script type="text/javascript">
	$("div").find(".rain").css('color', '#FF0000');
	//等价于：$("div .rain").css('color','#ff0000');
	//也等价于：$(".rain","div").css('color','#ff0000');
</script>
</body>
</html>

运行结果：

问题：这里为什么“测试2”不变为红色？

find() 方法定义：它是获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。find()方法要注意的地方：find()方法是在当前元素集合内部查找，不包括自己。

上面例子中$("div")包含两个元素，第一个元素符合要求，但第二个元素div本身的class虽然是"rain"，但其内部没有class=rain，所以不符合。

二.filter使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>filter使用</title>
<script src="lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<div class="css">
		<p class="rain">测试1</p>
	</div>
	<div class="rain">
		<p>测试2</p>
	</div>
<script type="text/javascript">
	$("div").filter(".rain").css('color', '#FF0000');
</script>
</body>
</html>

运行结果：

filter()方法定义：filter() 方法将匹配元素集合缩减为指定选择器的元素。意思就是对匹配元素的集合，用选择器测试每个元素本身（不是后代），符合选择器的元素包含在集合中，不符合的去掉（选择器就是起过滤作用），形成一个新的结果集。

在上面例子中：find()会在div元素内部（后代）寻找 class为rain 的元素。而filter()则是筛选div的class为rain的元素。一个是对它的子集操作，一个是对自身集合元素筛选。

再看两个w3school上filter()方法的例子：

例一：

<!DOCTYPE html>
<html>
<head>
<style>
div {
	width: 60px;
	height: 60px;
	margin: 5px;
	float: left;
	border: 2px white solid;
}
</style>
<script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<div></div>
	<div class="middle"></div>
	<div class="middle"></div>
	<div class="middle"></div>
	<div class="middle"></div>
	<div></div>
	<script>
	  $("div").css("background", "#c8ebcc")
	    .filter(".middle")
	    .css("border-color", "red");
	</script>
</body>
</html>

运行结果：

例二：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
		<li>list item 3</li>
		<li>list item 4</li>
		<li>list item 5</li>
		<li>list item 6</li>
	</ul>
	<script>
		$('li').filter(':even').css('background-color', 'red');
	</script>
</body>
</html>

运行结果：

使用filter()方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。实例如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<ul>
		<li><strong>list</strong> item 1 - one strong tag</li>
		<li><strong>list</strong> item <strong>2</strong> - two <span>strong
				tags</span>
		</li>
		<li>list item 3</li>
		<li>list item 4</li>
		<li>list item 5</li>
		<li>list item 6</li>
		<li><strong>list item 8 </strong> - one strong tag</li>
	</ul>
	<script>
		$('li').filter(function(index) {
			return $('strong', this).length == 1;
		}).css('background-color', 'red');
	</script>
</body>
</html>

运行结果：