表格外使用jQuery filter方法及筛选异常问题排查

看起来你遇到的问题大概率是选择器使用错误或者文本匹配逻辑不完整导致的，我来帮你拆解并解决：

问题根源分析 #

你代码里用了$("#milestoneCard").filter()，但HTML里ID是唯一标识——如果页面上有多个卡片，这个选择器只会选中第一个带id="milestoneCard"的元素，这就导致只有第一个卡片的内容会参与筛选，其他卡片根本没被纳入范围。这就是为什么输入"second"可能刚好匹配了第一个卡片，而"first"没效果的核心原因。另外你代码里的$(this).text也没完整调用text()方法，这也会影响文本匹配的逻辑。

修正后的完整代码示例 #

假设你的卡片HTML结构是这样的（每个卡片用类milestoneCard标识）：

<input type="text" id="txtSearch" placeholder="搜索卡片内容...">
<div class="milestoneCard">First milestone content</div>
<div class="milestoneCard">Second milestone content</div>
<div class="milestoneCard">Third milestone content</div>

对应的jQuery代码应该修正为：

$(document).ready(function() {
  $("#txtSearch").on("keyup", function() {
    // 获取输入值并统一转小写、去除首尾空格
    var value = $(this).val().toLowerCase().trim();
    // 用类选择器选中所有卡片，再进行筛选
    $(".milestoneCard").filter(function() {
      // 获取当前卡片的文本内容，同样转小写、去空格
      var cardText = $(this).text().toLowerCase().trim();
      // 根据是否包含关键词显示/隐藏卡片
      $(this).toggle(cardText.indexOf(value) > -1);
    });
  });
});

关键修正点 #

• 把$("#milestoneCard")改成$(".milestoneCard")：用类选择器选中所有卡片，而非单个ID元素
• 给输入值和卡片文本都加上trim()：避免首尾空格导致的匹配失败
• 完整调用text()方法：确保正确获取卡片内的文本内容
• 用indexOf(value) > -1判断是否包含关键词：逻辑更清晰直观

额外优化建议 #

如果卡片内有分层内容（比如标题、描述分开），可以针对性地选择特定元素的文本进行匹配，比如只搜索卡片标题：

var cardText = $(this).find(".card-title").text().toLowerCase().trim();

这样就能精准实现卡片的搜索筛选功能啦！

内容的提问来源于stack exchange，提问作者kg98