jQuery - 过滤器
jQuery 过滤器
使用 jQuery 过滤/搜索特定元素。
过滤表格
对表格中的项目执行不区分大小写的搜索
示例
在输入字段中输入内容以搜索表格中的名字、姓氏或电子邮件
| 名字 | 姓氏 | 电子邮件 |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
亲自尝试 »
示例说明：我们使用 jQuery 遍历每个表格行，以检查是否有任何文本值与输入字段的值匹配。toggle() 方法隐藏与搜索不匹配的行(display:none)。我们使用 toLowerCase() DOM 方法将文本转换为小写，这使得搜索不区分大小写（允许在搜索时使用“john”、“John”甚至“JOHN”）。
过滤列表
对列表中的项目执行不区分大小写的搜索
过滤任何内容
对 div 元素内的文本执行不区分大小写的搜索
