Multiple filtering of data attributes using the input flag

Question

I need a jQuery function that filters a set of data-attributes .

In my HTML structure, I have several list items, and there are attributes there:

data-offer and data-subcat these two will be used to filter items using multiple input flags.

So far, I have this jQuery that does the filtering, but not the way I want.

 $(".cs-widget-content").on("change", "input[type=checkbox]", function () { $(".five-column > li.column").hide(); $(".cs-widget-content").find("input:checked").each(function (i, el) { $(".five-column > li.column").filter('[data-offer="' + el.id + '"]').show(); }); $(".cs-widget-content").find("input:checked").each(function (j, el) { $(".five-column > li.column").filter('[data-subcat="' + el.id + '"]').show(); }); }); 

Here is jsfiddle

Solution I want:

• All data must be loaded on the page load (which works).

• The input filter for both data attributes should work together (for example, when the input is checked for data-offer , it will show that the data and if the data-subcat is checked, it will display data for this attribute as well as in the previous data-offer check.

• If any input is not verified, the data should be visible back.

I look forward to your help.

thanks

Answer 1

Iterate through products, not filters, and decide for everyone whether it should be displayed.

 var filter1HasChecked = $("[data-filter=1]:checked").length; var filter2HasChecked = $("[data-filter=2]:checked").length; $("ul.products li").each(function(i,v){ var $this = $(this); if((!filter1HasChecked || $("#" + $this.data("offer")).is(":checked")) && (!filter2HasChecked || $("#" + $this.data("subcat")).is(":checked"))){ $this.show(); } }); 

http://jsfiddle.net/Curt/k62kxm0x/4/

Such an operation would become costly with 100 elements, but then I would suggest some server-side filtering using AJAX or, possibly, implementing an interface structure such as AngularJS .