使用List.js使用类或数据属性进行筛选

Filtering using a class or data attribute using List.js

本文关键字：数据属性 筛选 List js 使用      更新时间：2023-09-26

如果我有这样的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属性的内容对其进行筛选？

我看到的所有示例都只允许基于可见的HTML内容进行搜索/筛选，但我希望基于data元素的内容进行筛选，如这里所示，或者可能是列表项的class。不过我不知道该怎么做。

如果您想使用jQuery而不是list.js来查找和隐藏/显示具有匹配类/数据元素的元素，您可以简单地使用.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>

相关文章：