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>

Answer 1

有几个问题：

您在insertAfter参数中使用的类规范缺少“ s”。应该是.itemPrices而不是.itemPrice
insertAfter不需要第二个参数，因此您添加的内容比您想要的要多得多。改用：
```
.insertAfter($('.itemPrices', this))
```
CSS类nowPrice不足以使其他内容可见，因为父元素具有CSS font-size:0，就像“我如何使自己的生活变得艰难！？”。无论如何，使用这种字体大小，您不会在小提琴中看到其他内容。最快的解决方案是为nowPrice CSS类指定字体大小

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

Answer 2

如果查询选择器运行良好，则应尝试使用.append()而不是.insertAfter()：

$( "#productListings .productListItem").each(function() {
  // ...

  var nowPrice = $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>');

  $( this ).append(nowPrice);
});

jQuery-对每个产品使用一次.each（）插入新价格

2 个答案: