使用 jQuery 轻松过滤 HTML 部门
Easy filter from HTML divisions with jQuery
我正在尝试更改与给定输入条件匹配的项目的背景颜色 css 属性：
我的网页：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
因此，如果在输入中"用户"输入："aebdc"，它应该 #small55 背景颜色更改为黄色。如果在输入中只有一个："a"，它应该改变所有div的背景颜色。显然，如果没有一个符合标准，则不会更改任何标准。
您可以根据 DIV 的文本内容进行筛选
$('#input').on('input', function() {
var value = this.value;
$('.global div').css('background', '').filter(function() {
return $(this).text().indexOf(value) !== -1;
}).css('background', 'red');
});
小提琴
如果需要不区分大小写的搜索，请向值和文本添加toLowerCase。
> JQuery
$('#input').on('input', function() {
var input = $('#input').val();
if(input.length == 6) {
$( ".global div:contains(" + input + ")" ).css( "background", "#" + input );
}
});
您需要使用
:contains() 进行过滤，然后使用 text() 将背景设置为div 的文本值：
$('#input').on('input', function() {
var value = this.value;
// reset
$('div.global div').css( "background-color", "inherit");
// set new bgs
$('div.global div:contains(' + value + ')').css( "background-color", function() {
return '#' + $(this).text();
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>这里是
//bind input change event handler
jQuery("#input").on('change',function(){
//input that user entered
var input = jQuery(this).val();
//for every .small class element do the following
jQuery('.small').each(function(){
//this is the text written in each div
var text = jQuery(this).text().trim();
//if user input is substring of text
//then give it custom class
//othervise remove that class
if( input == text.substring(0,input.length) ){
jQuery(this).addClass("match");
}else{
jQuery(this).removeClass('match')
}
})
}).match{
background-color: yellow;
}<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">aaaaaa</div>
<div id="small12" class="small">aaabaa</div>
<div id="small13" class="small">aaacaa</div>
<div id="small14" class="small">aaadaa</div>
<div id="small15" class="small">aaaeaa</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 如何设置html元素填充的动画
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何将HTML id分配给元素，以及如何将JavaScript应用于元素
- 如何编写HTML输入的JS内联
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量
- 如何使Javascript动态html表及其上的事件
- 在chrome.tabs.onCreated之后加载HTML页面
- 如何在vs2002中调试html页面
- 如何使用javascript或html下载PDF格式的填写表单
- 视频HTML没有'无法在Internet Explorer 11上工作
- HTML表单提交时未执行外部函数
- 如何将输入(type=text）从html表单传递到javascript函数
- 使用angular重定向到html页面
- 分析高度属性时出现意外值｛｛specs.height｝｝.index.html
- 在html Select中添加搜索
- 多级HTML表单
- 使用 jQuery 轻松过滤 HTML 部门
