jQuery filter() 方法

jQuery 筛选过滤

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

表格筛选

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

在输入字段中输入一些内容，在表格中搜索名字、姓氏或 Email:

姓氏	名称	Email
John	Doe	john@example.com
Mary	Moe	mary@mail.com
July	Dooley	july@greatstuff.com
Anja	Ravendale	a_r@test.com

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<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>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<h2>筛选表格</h2>
<p>在输入字段中输入一些内容，在表格中搜索名字、姓氏或 Email:</p>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
  <thead>
  <tr>
    <th>名称</th>
    <th>姓氏</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>
<p>请注意，我们在 tbody 中开始搜索，以防止筛选表头。</p>
</body>
</html>

运行一下

实例说明：

我们使用 jQuery 循环遍历表格的每一行，以检查是否有任何文本值与输入字段的值匹配。 toggle() 方法隐藏与搜索不匹配的行（display:none）。我们使用 toLowerCase() 方法将文本转换为小写，这使得搜索不区分大小写（搜索时可以使用 "john", "John", 甚至 "JOHN"）。

过滤列表

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

在输入字段中输入一些内容以搜索列表中的项:

First item
Second item
Third item
Fourth

代码如下:

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>
<h2>过滤列表</h2>
<p>在输入字段中输入一些内容，以在列表中搜索匹配的项:</p>
<input id="myInput" type="text" placeholder="Search..">
<br>
<ul id="myList">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>
</body>
</html>

运行一下

过滤其他

这是一个段落

这是 div 中的 div

另一个段落

代码如下:

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>
<h2>过滤其他</h2>
<p>在输入字段中键入一些内容，在div元素中搜索 id="myDIV" 的特定文本:</p>
<input id="myInput" type="text" placeholder="Search..">
<div id="myDIV">
  <p>这是一个段落</p>
    <div>这是 div 中的 div</div>
    <button style="margin:8px 4px 8px 0">这是按钮</button><button style="margin:8px 0">这是另一个按钮</button>
    <p>另一个段落</p>
</div>
</body>
</html>

运行一下

jQuery filter() 方法

jQuery 筛选过滤

表格筛选

代码如下：

实例说明：

过滤列表

代码如下:

过滤其他

代码如下:

分类导航