jQuery - 筛选

jQuery 筛选

使用 jQuery 筛选/搜索特定元素。


筛选表格

对表中的项目执行不区分大小写的搜索:

实例

在输入字段中键入一些内容,搜索表格中名字、姓氏或电子邮件:


Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

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")。


筛选列表

对列表中的项目执行不区分大小写的搜索:

实例

在输入字段中输入内容以在列表中搜索项目:


  • First item
  • Second item
  • Third item
  • Fourth
亲自试一试 »

筛选所有

对 div 元素中的所有文本执行不区分大小写的搜索:

实例


I am a paragraph.

I am a div element inside div.

Another paragraph.

亲自试一试 »