Question

我在html页面中有一个div列表，如下所示：

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

应该注意的是，并非每个具有product_listing类的div都具有数量数据值。我想获取数据量小于20的每个div的数组，并将一个名为inventory_low的类添加到该product_listing div中，所以我在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

尝试以下代码，这是正常工作的代码

＆＃13;

$(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");


});

＆＃13;

.inventory_low{
    color:red;
}

＆＃13;

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

＆＃13;

Answer 2

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

这是工作示例

＆＃13;

$(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");

});

＆＃13;

.inventory_low{
   background:red;
}

＆＃13;

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

＆＃13;

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){
    	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>

使用jQuery按数量过滤数据？

4 个答案: