jQuery filter（）示例

最新推荐文章于 2023-07-26 14:47:16 发布

cyan20115

最新推荐文章于 2023-07-26 14:47:16 发布

阅读量974

点赞数

文章标签： javascript ViewUI

jQuery筛选器功能是一项有用的功能，可通过使用匹配的选择器或函数的测试从一组匹配的元素中提取元素。

1.过滤器（选择器）

在一组匹配的元素中，获取仅与filter（）选择器匹配的元素。

例如，

$("div").filter("#div1").css('background-color', 'blue');

匹配所有div元素，然后选择ID为“ div1”的div元素，并将元素的背景色更改为蓝色。

2.过滤器（功能）

在一组匹配的元素中，获取通过功能测试的元素。该函数在内部传递一个index参数，该参数代表匹配元素的索引，从0开始计数。

例如，

$('div').filter(function(index) {
	if(index==2 || index==3){ //0 index based
		return true;
	}
}).css('background-color', 'blue');

使所有div元素匹配，使用函数进行过滤以仅选择third（2）和four（3）div元素。

$('div').filter(function(index) {
	return $("b", this).length == 1;
}).css('background-color', 'blue');

使所有div元素匹配，使用功能过滤以选择包含<b>标签的div元素。

jQuery filter（）示例

<html>
<head>
<title>jQuery filter example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery filter example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#filterSelector").click(function () {
		
	$('div').css('background-color', 'white');
		
	$("div").filter("#div1").css('background-color', 'blue');
			
    });
	
    $("#filterFunction").click(function () {
		
	$('div').css('background-color', 'white');
			
	$('div').filter(function(index) {
		if(index==2 || index==3){ //0 index based
			return true;
		}
	}).css('background-color', 'blue');
		
    });
	
    $("#filterFunction2").click(function () {
		
	$('div').css('background-color', 'white');
		
	$('div').filter(function(index) {
		return $("b", this).length == 1;
	}).css('background-color', 'blue');
			
    });
	
  });
</script>
</head><body>

<div id="div1">
	<b>This is div 1 with 'b' tag</b>
</div>
<div id="div2">
	This is div 2
</div>
<div id="div3">
	<b>This is div 3 with 'b' tag</b>
</div>
<div id="div4">
	This is div 4
</div>

<br/>
<br/>
<br/>

<input type='button' value='filter(selector)' id='filterSelector'>
<input type='button' value='filter(index)' id='filterFunction'>
<input type='button' value='filter(index)+b' id='filterFunction2'>
</body>
</html>

试试演示

标签： jQuery的 jQuery的穿越

翻译自: https://mkyong.com/jquery/jquery-filter-example/

cyan20115

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery filter（）示例

jQuery筛选器功能是一项有用的功能，可通过使用匹配的选择器或函数的测试从一组匹配的元素中提取元素。 1.过滤器（选择器）在一组匹配的元素中，获取仅与filter（）选择器匹配的元素。例如， $("div").filter("#div1").css('background-color', 'blue'); 匹配所有div元素，然后选择ID为“ div1”的div元素，并...
复制链接

扫一扫