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.