jquery - 对每个产品使用 .each() 一次来插入新价格

Question

您好，我遇到了 .each() 为它正在查看的每个元素触发一次的问题。

所以在电子商务网站上有一个包含产品列表的页面，每个产品都有一个包含 div #productListings .productListItem 并且在那个 div 里面有一些数据，包括价格 .itemPrice .

我试图让它查看包含 div 的每个产品，获取价格，将其除以 20% 并在下方显示新价格:

$( "#productListings .productListItem" ).each(function() {
  var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
  var PLPdiscount = (PLPpriceStripped/100)*20;
  var PLPnewPrice = PLPpriceStripped-PLPdiscount;

  $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter('.itemPrice', this);
});

当我运行它时，它返回 £0 作为值(这意味着我的代码没有按预期工作)，但也会为页面中每个产品下的页面上的每个产品复制一次。

我显然没有 100% 掌握 .each()，而且它也没有返回每种产品的正确价格。

有什么帮助吗？

JSfiddle:https://jsfiddle.net/1bqh2f90/7/

$(document).ready(function(){

  $( "#productListings .productListItem" ).each(function() {
    var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
    var PLPdiscount = (PLPpriceStripped/100)*20;
    var PLPnewPrice = PLPpriceStripped-PLPdiscount;

    $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter('.itemPrice', this);
  });

});

#productListings {
  display:block;
  font-size:0;
}

#productListings .productListItem {
  display:inline-block;
  margin:1%;
  width:48%;
}

#productListings .productListItem img {
  display:block;
  width:100%;
}

#productListings .productListItem .prices {
  display:block;
  padding:10px;
}

#productListings .productListItem .was {
  display:inline-block;
  padding:10px;
  text-decoration: line-through;
  font-size:12px;
}

#productListings .productListItem .pri {
  display:inline-block;
  padding:10px;
  font-size:12px;
}

.nowPrice {
  display:block;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="productListings">
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £20</div> <div class="pri">Now £15</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £20</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £50</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £50</div> <div class="pri">Now £30</div>
    </div>
  </div>
</section>

Answer 1

有几个问题:

1. insertAfter 参数中的类规范缺少“s”。它应该是 .itemPrices 而不是 .itemPrice

2. insertAfter不期望有第二个参数，所以你添加的内容比你想要的要多得多。改用:

   .insertAfter($('.itemPrices', this))
   

3. CSS 类 nowPrice 不足以使附加内容可见，因为父元素有一个 CSS font-size:0，就像“我怎么能让自己过不去!？”。无论如何，使用这样的字体大小，您不会在 fiddle 中看到其他内容。最快的解决方案是为 nowPrice CSS 类

指定字体大小

这是更新后的 fiddle :https://jsfiddle.net/j9nyhzs8/

和片段:

$(document).ready(function(){

  $( "#productListings .productListItem" ).each(function() {
    var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
    var PLPdiscount = (PLPpriceStripped/100)*20;
    var PLPnewPrice = PLPpriceStripped-PLPdiscount;

    $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter($('.itemPrices', this));
  });

});

#productListings {
  display:block;
  font-size:0;
}

#productListings .productListItem {
  display:inline-block;
  margin:1%;
  width:48%;
}

#productListings .productListItem img {
  display:block;
  width:100%;
}

#productListings .productListItem .prices {
  display:block;
  padding:10px;
}

#productListings .productListItem .was {
  display:inline-block;
  padding:10px;
  text-decoration: line-through;
  font-size:12px;
}

#productListings .productListItem .pri {
  display:inline-block;
  padding:10px;
  font-size:12px;
}

.nowPrice {
  display:block;
  padding:10px;
  font-size:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="productListings">
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £20</div> <div class="pri">Now £15</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £20</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £50</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £50</div> <div class="pri">Now £30</div>
    </div>
  </div>
</section>