在表元素外使用jQuery滤波器

Question

我找到了许多有关如何在桌子上使用jQuery滤镜的示例，但是我找不到在不在表中的项目上做到的。例如，我有必须搜索的卡。

我试图从这个W3Schools示例中调整代码，当我键入单词"第二"，但不是单词'first'。

时，它似乎可以工作。

$(document).ready(function() {
            $("#txtSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#milestoneCard").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });

我想知道这是否可以，如果这样，我必须更改。

我已经四处搜索了很多，尽管我确定这是可能的，但我似乎找不到我的情况。

我在以下JSFIDDLE中复制了它

Answer 1

您使用相同的id作为两个组件。
将其更改为class="col-md-4 milestoneCard"，您的选择器将其更改为$(".milestoneCard")，它将起作用。
id属性应在整个页面上是唯一的，并且选择器只会抓住它找到的第一个。

Answer 2

您在页面上具有同一ID的多个。因此，JS将无法正常工作。id是唯一的，可以重复课程。

要解决此问题，请尝试使MilestoneCard成为类，而不是HTML中的ID，如下所示

html

<input type="search" id="txtSearch">
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">First</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>
<div class="col-md-4 milestoneCard">
    <div class="card card-body bg-light" style="margin-bottom: 1em;">
        <h3 id="searchTitle">Second</h3>
        <p>{{description}}</p>
        <p>Due date:{{dueDate}}</p>
        <p>Completed date:{{compDate}}</p>
        <form action="/plannerHomepage" method="POST">
            <input type="hidden" name="compId" value="{{id}}">
            <input type="submit" role="button" class="btn btn-primary btn-lg" value="completed" style="margin-top:1em;" />
        </form>
    </div>
</div>

和您的JavaScript

$(document).ready(function() {
    $("#txtSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".milestoneCard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

或在此处查看JSFIDDLE