使用 class 过滤或使用 List.js 过滤数据

Question

如果我有一个这样的 HTML 列表：

<div id="my-list">
    <ul class="list">
        <li data-cat="fish">Cod</li>
        <li data-cat="fish">Salmon</li>
        <li data-cat="bird">Crow</li>
    </ul>
</div>

是否可以使用 List.js 根据 data-cat 属性的内容过滤它？

我看到的所有示例只允许 searching/filtering 基于可见的 HTML 内容，但我想根据 data 元素的内容进行过滤，如在这里，或者可能是列表项的 class。不过我不知道该怎么做。

Answer 1

如果您想使用 jQuery 而不是 list.js to find and hide/show elements with matching classes/data elements ，您可以简单地使用 .filter.

例如，如果要将 fish 的项目隐藏为 data-cat：

$('.list li').filter('[data-cat="fish"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="my-list">
    <ul class="list">
        <li data-cat="fish">Cod</li>
        <li data-cat="fish">Salmon</li>
        <li data-cat="bird">Crow</li>
    </ul>
</div>

使用 class 过滤或使用 List.js 过滤数据

Filtering using a class or data attribute using List.js

javascript

listjs