无法使用jQuery添加多个锂

温德尔

我有一个要制作的购物车，订单在json上，我想从该json文件循环，然后在循环上添加与该数据相对应的li，即使用jquery

我正在使用模板

<script id='cartItem' type='text/template'>
        <li>
            <div class="item-wrap">
                <div class="quantity-wrap">
                    <input type="number" name="Quantity" min="0" value="" />
                </div>
                <div class="info-wrap">
                    <p class="item-name">Item 1</p>
                    <div><p class="item-qpu">quantity per unit sdfsdfsdf</p></div>
                    <p class="item-price">Price: 12.55</p>
                </div>
                <div class="info-total">
                    <div>
                        <p><i>Total:</i></p>
                        <h3 class="item-total">202</h3>
                    </div>
                </div>
                <div class="remove-item">
                    <a href="#" class="remove">&times</a>
                </div>
            </div>
        </li>
    </script>

这是主要内容

<div class="sidebar">
    <div>
        <h3>Orders</h3>
        <hr />
    </div>
    <ul class='cart-items' id="cart-items">

    </ul>
</div>

<div class="content">
    <div class="col-sm-4" style="background-color:yellow;">
        <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
        <p>Sed ut perspiciatis...</p>
    </div>
</div>

这是我的Jquery脚本

  <script>


        $(document).ready(function () {
            var cart = $('.cart-items');
            function pops() {
                var $template = $($('#cartItem').text());
                cart.empty();
                carted_prods.forEach(function (element, index) {
                    $template.find('input').val(element.itemQuantity);
                    $template.find('.item-name').text(element.itemName);
                    $template.find('li').addClass('no' + index.toString);
                    $("#cart-items").append($template);
                    console.log($template);
                });
        }
        pops();
    });
</script>

问题是仅显示json的最后一条记录

罗里·麦克罗森（Rory McCrossan）

您需要在循环var $template = $($('#cartItem').text()); 内移动forEach()。否则，您将在循环的每个迭代中修改相同的元素，而不是创建新的元素。

carted_prods.forEach(function(element, index) {
  let $template = $($('#cartItem').text());
  $template.find('input').val(element.itemQuantity);
  $template.find('.item-name').text(element.itemName);
  $template.find('li').addClass('no' + index.toString);
  $("#cart-items").append($template);
});

工作示例：

let carted_prods = [{
  itemQuantity: 1,
  itemName: 'Lorem',
}, {
  itemQuantity: 2,
  itemName: 'Ipsum',
}, {
  itemQuantity: 3,
  itemName: 'Dolor',
}, {
  itemQuantity: 4,
  itemName: 'Sit',
}]

$(document).ready(function() {
  var cart = $('.cart-items');
  
  function pops() {
    cart.empty();
    carted_prods.forEach(function(element, index) {
      let $template = $($('#cartItem').text());
      $template.find('input').val(element.itemQuantity);
      $template.find('.item-name').text(element.itemName);
      $template.find('li').addClass('no' + index.toString);
      $("#cart-items").append($template);
    });
  }
  pops();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script id='cartItem' type='text/template'>
  <li>
    <div class="item-wrap">
      <div class="quantity-wrap">
        <input type="number" name="Quantity" min="0" value="" />
      </div>
      <div class="info-wrap">
        <p class="item-name">Item 1</p>
        <div>
          <p class="item-qpu">quantity per unit sdfsdfsdf</p>
        </div>
        <p class="item-price">Price: 12.55</p>
      </div>
      <div class="info-total">
        <div>
          <p><i>Total:</i></p>
          <h3 class="item-total">202</h3>
        </div>
      </div>
      <div class="remove-item">
        <a href="#" class="remove">&times</a>
      </div>
    </div>
  </li>
</script>
<div class="sidebar">
  <div>
    <h3>Orders</h3>
    <hr />
  </div>
  <ul class='cart-items' id="cart-items"></ul>
</div>

<div class="content">
  <div class="col-sm-4" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-8" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。