javascript - Filtering using a class or data attribute using List.js

Question

If I have an HTML list like this:

<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>

Is it possible to filter it based on the contents of the data-cat attribute using List.js?

All the examples I've seen only allow searching/filtering based on visible HTML content, but I'd like to filter based on the content of a data element, as here, or maybe the list item's class. I can't see how to do this though.

Answer 1

如果您想使用 jQuery 而不是list.js来查找和隐藏/显示具有匹配类/数据元素的元素，正如您在此处评论的那样，您可以简单地使用.filter.

例如，如果您想使用fishas隐藏项目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>