Filter HTML Elements By Data Name & Value - data-filter
File Size: | 16.7 KB |
---|---|
Views Total: | 11058 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny and performant data filtering plugin that makes it possible to filter through a list of entries by data names or data values you specify.
How to use it:
1. Download and place the JavaScript file jquery-data-filter.min.js after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/jquery-data-filter.min.js"></script>
2. Categorize your data using data
attributes as follows:
<div id="language-list"> <p class="filter-me" data-html="HTML5"> HTML 5 </p> <p class="filter-me" data-html="HTML4"> HTML 4 </p> <p class="filter-me" data-html="XML"> XML </p> <p class="filter-me" data-javascript="jQuery"> jQuery </p> <p class="filter-me" data-javascript="JavaScript"> JavaScript </p> <p class="filter-me" data-javascript="Angular"> Angular </p> <p class="filter-me" data-javascript="React"> ReactJS </p> <p class="filter-me" data-css="CSS3"> CSS 3 </p> <p class="filter-me" data-css="CSS4"> CSS 4 </p> </div>
3. Filter the list by data name:
// no results $(".filter-me").filterData("node").length // output: 4 $(".filter-me").filterData("javascript").length // output: HTML 5, HTML 4, XML $(".filter-me").filterData("html").text();
4. Filter the list by data values:
// output: jQuery $(".filter-me").filterData("javascript", "jQuery").text();
Changelog:
v1.0.9 (2020-08-13)
- JS updated
This awesome jQuery plugin is developed by godoyrw. For more Advanced Usages, please check the demo page or visit the official website.