根据表格中的内容使用jQuery附加价格

Question

div标记为“ simple-product-tile”的商品包含默认价格，这些价格需要在比较表如果的商品名称相同的页面的下一页上覆盖这些价格。

>

我有一些代码可以成功地将每个产品标题压缩到表格的页面下方，并为控制台输出拉出相关价格。

我现在想扩展此逻辑，以便它覆盖span.lbl-price中的原始HTML标记。

我认为它就像添加一样简单：

$(".lbl-price").append(associatedPrice);

但是，这导致每个价格被添加到每个元素三次。

这不是在控制台中成功记录一次正确价格的情况：

JS小提琴： https://jsfiddle.net/5vtydcb7/15/

$(function() {
  //Find each title
  $("#relatedProductsTab1 .simple-product-tile a.product-title").each(function() {
    //Make this text a variable
    var relatedProd = $(this).text();
    //log the variable
    console.log(relatedProd);
    //If this variable exist in the list...
    if ($("table.waffle td:contains(" + relatedProd + ")").length) {
      //Log to console
      console.log('Related product is located in imported data');
      //Pull price data from next table cell
      var associatedPrice = $("table.waffle td:contains(" + relatedProd + ")").next('td').text();
      //Log price
      console.log(associatedPrice);
      //Override related product price with this variable
      //$(".lbl-price").append(associatedPrice);
    } else {
      console.log('Related product is NOT located in imported data');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='relatedProductsTab1'>
  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">Foo First Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>

  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">My Second Foo Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>

  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">My Third Foo Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>
</div>


<table class="waffle">
  <tr>
    <th>1</th>
    <th>Comparison Table</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>2</td>
    <td>Foo First Widget</td>
    <td>£9.99</td>
  </tr>
  <tr>
    <td>3</td>
    <td>My Second Foo Widget</td>
    <td>£10.99</td>
  </tr>
  <tr>
    <td>4</td>
    <td>My Third Foo Widget</td>
    <td>11.99</td>
  </tr>
</table>

Answer 1

您需要针对当前元素定位lbl-price。使用.closest()定位共同祖先，然后使用.find()定位所需元素。

 $(this)
   .closest('.simple-product-tile') //Target common ancestor 
   .find(".lbl-price") //Target the lbl
   .append(associatedPrice);

$(function() {
  //Find each title
  $("#relatedProductsTab1 .simple-product-tile a.product-title").each(function() {
    //Make this text a variable
    var relatedProd = $(this).text();
    //log the variable
    console.log(relatedProd);
    //If this variable exist in the list...
    if ($("table.waffle td:contains(" + relatedProd + ")").length) {
      //Log to console
      console.log('Related product is located in imported data');
      //Pull price data from next table cell
      var associatedPrice = $("table.waffle td:contains(" + relatedProd + ")").next('td').text();
      //Log price
      console.log(associatedPrice);
      //Override related product price with this variable
      $(this)
        .closest('.simple-product-tile')
        .find(".lbl-price")
        .append(associatedPrice);
    } else {
      console.log('Related product is NOT located in imported data');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='relatedProductsTab1'>
  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">Foo First Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>

  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">My Second Foo Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>

  <div class="simple-product-tile">
    <!-- Product -->
    <div>
      <img src="https://via.placeholder.com/150x150">
    </div>
    <div>
      <a class="product-title" href="#">My Third Foo Widget</a>
    </div>
    <div>
      <span class="lbl-price">£10.00</span>
    </div>
  </div>
</div>


<table class="waffle">
  <tr>
    <th>1</th>
    <th>Comparison Table</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>2</td>
    <td>Foo First Widget</td>
    <td>£9.99</td>
  </tr>
  <tr>
    <td>3</td>
    <td>My Second Foo Widget</td>
    <td>£10.99</td>
  </tr>
  <tr>
    <td>4</td>
    <td>My Third Foo Widget</td>
    <td>11.99</td>
  </tr>
</table>