jquery 名字筛选遍历

实现jquery名字筛选遍历

1. 整体流程

首先，我们需要创建一个输入框用于输入筛选关键字，并且创建一个列表来展示名字。当输入框中输入文字时，我们需要通过jquery来筛选名字列表，并将符合条件的名字展示在页面上。

下面是整个流程的步骤表格：

步骤	描述
1	创建一个输入框和一个名字列表
2	监听输入框的输入事件，获取输入的筛选关键字
3	使用jquery筛选名字列表中符合条件的名字
4	将筛选结果展示在页面上

2. 代码实现

HTML部分：

登录后复制

<input type="text" id="filter" placeholder="输入关键字筛选名字">
<ul id="names">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ul>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

jQuery代码：

登录后复制

// 监听输入框的输入事件
$('#filter').keyup(function() {
  // 获取输入的筛选关键字
  var filter = $(this).val();

  // 使用jquery筛选名字列表中符合条件的名字
  $('#names li').each(function() {
    if ($(this).text().includes(filter)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.

代码解释：

1. $('#filter').keyup(function() { ... });：监听输入框的keyup事件，当输入框中有输入时触发相应的函数。
2. var filter = $(this).val();：获取输入框中的值，即筛选关键字。
3. $('#names li').each(function() { ... });：遍历名字列表中的每一个li元素。
4. if ($(this).text().includes(filter)) { ... }：判断当前li元素的文本内容是否包含筛选关键字。
5. $(this).show(); 和 $(this).hide();：根据判断结果展示或隐藏相应的li元素。

3. 类图

4. 甘特图

通过以上步骤和代码，你可以实现一个简单的jquery名字筛选遍历功能。希朋友可以根据实际需求进行功能扩展和优化。祝你编程顺利！

原创作者: u_16213383 转载于: https://blog.51cto.com/u_16213383/11437706