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

If you want to use jQuery instead of list.js to find and hide/show elements with matching classes/data elements as you commented here , you can simply use .filter .

For example, if you want to hide the items with fish as 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>