Question

我试图根据同位素js设置的可见div来过滤产品价格。我尝试了这些代码，但它在console.log上给出了null。请指出我在哪里是错误的。谢谢了。

<div class=".product-layout">
  <div id="item" class=".mix-item isotope-item">
    <div class=".product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item isotope-hidden">
    <div class=".product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item isotope-hidden">
    <div class=".product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item">
    <div class=".product" data-price="29"></div>
  </div>
</div>

var numbers = $("#item).not(".isotope-hidden").map(function () {
       return parseInt(this.children(".product").getAttribute('data-price'), 10) || -Infinity;
   }).toArray();
Console.log(numbers);

Answer 1

首先，ID应该是唯一的，因此您应该使用类更改这些ID，现在这样做：

var numbers = $(".item").not(".isotope-hidden").map(function () {
       return parseInt($(this).children(".product").data('price'), 10) || Infinity;
   }).toArray();
console.log(numbers);

Answer 2

以这种方式编辑你的HTML。给一个类而不是你元素的id

<div class=".product-layout">
      <div class="item" class=".mix-item isotope-item">
        <div class=".product" data-price="29"></div>
      </div>
      <div class="item" class=".mix-item isotope-item isotope-hidden">
        <div class=".product" data-price="29"></div>
      </div>
      <div class="item" class=".mix-item isotope-item isotope-hidden">
        <div class=".product" data-price="29"></div>
      </div>
      <div class="item" class=".mix-item isotope-item">
        <div class=".product" data-price="29"></div>
      </div>
    </div>

然后在你的jquery代码中使用类选择器.而不是id选择器#

var numbers = $(".item:not(.isotope-hidden)").map(function () {
       return parseInt($(this).children(".product").attr('data-price'), 10) || Infinity;
   }).toArray();

请注意，由于性能原因我更改了jquery而不是mehod（.not()）而没有选择器（:not）

有关文档，请参阅here

Answer 3

您的代码存在一些问题。首先，不要在＃34;。＃34;开始上课。（class =＆＃34; .product＆＃34;）。我做了一些改变，试试这个。

    var numbers = $(".item").not(".isotope-hidden").map(function () {
       return parseInt($($(this).children(".product")[0]).attr("data-price"), 10) || Infinity;
   }).toArray();
console.log(numbers);

<div class="product-layout">
  <div class=".mix-item isotope-item item">
    <div class="product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item isotope-hidden item">
    <div class="product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item isotope-hidden item">
    <div class="product" data-price="29"></div>
  </div>
  <div id="item" class=".mix-item isotope-item item">
    <div class="product" data-price="29"></div>
  </div>
</div>

jquery .map（）具有特定类的div

3 个答案: