Filter webshop products by properties with JavaScript

Question

I have a webpage with about 20 products wrapped in divs. I want to filter them by properties, for example price oder size, without reloading the page.

My first idea was to put the properties as the class-properties of the wrapper-div and hide them with jQuery. But this seems circuitous, especially when you try to get products within a price range.

Any ideas how to go about this?

Answer 1

To mark properties in an html element, use Jquery .data() instead of using classes.

To filter the selection to hide or show, use Jquery .filter(), even if it is price range.