量でデータをフィルタリングするためにjQueryを使用しますか？

Question

私はこのように見えるHTMLページのdivタグのリストを持っている：

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

クラスproduct_listingではないすべてのdiv要素は、数量データ値を持っていることに留意すべきです。私はデータ量が20未満のすべてのdivの配列を取得し、そのproduct_listing divにinventory_lowというクラスを追加したいので、これを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"); 


}); 

問題は、私のフィルタ機能が動作していない、と私はいないすべてのproduct_listingは、データ量の値を持っているので、それはだと考えているということです。これを回避する方法はありますか？コードの下

Answer 1

てみてください。この作業をされているコードここ

$(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 

取り組んでいる例

$(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

以下の例を参照してください。この

$(document).ready(function() { 

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

Answer 4

をお試しください：

var products = document.getElementsByClassName('product_listing'); 
 
$(products).each(function(index, object){ 
 
    \t if ($(object).data("quantity") <= 20) { 
 
     \t $(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>