This time I will share jQuery Plugin and tutorial about Filter HTML Elements By Data Name & Value – data-filter, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/jquery-data-filter.min.js"></script> |
2. Categorize your data using data attributes as follows:
01 |
<div id="language-list"> |
02 |
<p class="filter-me" data-html="HTML5"> |
05 |
<p class="filter-me" data-html="HTML4"> |
08 |
<p class="filter-me" data-html="XML"> |
11 |
<p class="filter-me" data-javascript="jQuery"> |
14 |
<p class="filter-me" data-javascript="JavaScript"> |
17 |
<p class="filter-me" data-javascript="Angular"> |
20 |
<p class="filter-me" data-javascript="React"> |
23 |
<p class="filter-me" data-css="CSS3"> |
26 |
<p class="filter-me" data-css="CSS4"> |
3. Filter the list by data name:
2 |
$(".filter-me").filterData("node").length |
5 |
$(".filter-me").filterData("javascript").length |
8 |
$(".filter-me").filterData("html").text(); |
4. Filter the list by data values:
2 |
$(".filter-me").filterData("javascript", "jQuery").text(); |
Changelog:
v1.0.9 (2020-08-13)
This awesome jQuery plugin is developed by godoyrw. For more Advanced Usages, please check the demo page or visit the official website.
