Using jQuery to filter data by quantity?

Question

I have a list of divs in an html page that look like this:

<div class="product_listing" data-category="hardware" data-quantity="2">

It should be noted that not every div with the class product_listing has a quantity data value. I want to fetch an array of every div with a data-quantity less than 20 and add a class called inventory_low to that product_listing div, so I wrote this in javascript.

$( document ).ready(function() {

var products = document.getElementsByClassName('product_listing');

var low_products = $(products).filter(function () {
    return $(this).data("quantity") <= 20;
});
$low_products.addClass("inventory_low");


});

The problem is that my filter function is not working, and I'm thinking that it's because not every product_listing has a data-quantity value. Is there any way around this?

Answer 1

Try below code this is working code

 $(document).ready(function () { //var products = $('.product_listing'); /*----OR-----*/ var products = document.getElementsByClassName('product_listing'); var low_products = $(products).filter(function () { if ($(this).data("quantity") <= 20) { $(this).addClass("inventory_low"); } //return $(this).data("quantity") <= 20; }); //low_products.addClass("inventory_low"); }); 

 .inventory_low{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="product_listing" data-category="hardware" data-quantity="2">2</div> <div class="product_listing" data-category="hardware" data-quantity="3">3</div> <div class="product_listing" data-category="hardware" data-quantity="62">62</div> <div class="product_listing" data-category="hardware" data-quantity="25">25</div> <div class="product_listing" data-category="hardware" data-quantity="22">22</div> 

Answer 2

$low_products.addClass("inventory_low");
 ^
This is not defined

Here is working example

 $(document).ready(function() { var products = document.getElementsByClassName('product_listing'); var low_products = $(products).filter(function() { return $(this).data("quantity") <= 20; }); /* You need correction here */ low_products.addClass("inventory_low"); }); 

 .inventory_low{ background:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product_listing" data-category="hardware" data-quantity="2">2</div> <div class="product_listing" data-category="hardware" data-quantity="21">21</div> <div class="product_listing" data-category="hardware" data-quantity="22">22</div> <div class="product_listing" data-category="hardware" data-quantity="9">9</div> <div class="product_listing" >Plain</div> 

Answer 3

Try this

$( document ).ready(function() {

        $(".product_listing").each(function(){
           if($(this).data("quantity")<= 20){
             $(this).addClass("inventory_low");
           }
        });
});

Answer 4

See example below:

 var products = document.getElementsByClassName('product_listing'); $(products).each(function(index, object){ if ($(object).data("quantity") <= 20) { $(object).addClass("inventory_low"); } }); 

 .inventory_low { background-color: #ffbdbd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product_listing" data-category="hardware" data-quantity="2">Product1</div> <div class="product_listing" data-category="hardware" data-quantity="21">Product2</div> <div class="product_listing" data-category="hardware" data-quantity="6">Product3</div> <div class="product_listing" data-category="hardware">Product4 (no quantity data)</div>