jquery - 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 作为值（这意味着我的代码没有按预期工作），但也会为页面中每个产品下的页面上的每个产品复制一次。

我显然没有对 .each() 有 100% 的把握，但它也没有在每种产品下返回正确的价格。

请问有什么帮助吗？

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>

标签： jqueryhtmleach

Answer 1

有几个问题：

1. 您在insertAfter参数中的类规范缺少“s”。它应该.itemPrices代替.itemPrice

2. insertAfter不期望第二个参数，因此您添加的内容比您想要的要多得多。改用：

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

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

这是更新的小提琴：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>