Can'；t使用jquery添加多个li

我有一个购物车要做，订单在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>

项目1
每单位数量

价格：12.55
总数：

202

这是主要内容

<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>

$（文档）.ready（函数（）{
var cart=$（'.cart items'）；
函数pops（）{
var$template=$（$（'#cartItem'）.text（）；
cart.empty（）；
carted_prods.forEach（函数（元素、索引）{
$template.find（'input'）.val（element.itemQuantity）；
$template.find（'.item name'）.text（element.itemName）；
$template.find（'li'）.addClass（'no'+index.toString）；
$（“#购物车项目”）.append（$template）；
console.log（$template）；
});
}
pops（）；
});

---

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

您需要移动

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=[{
项目数量：1，
itemName:'Lorem'，
}, {
项目数量：2，
itemName:“Ipsum”，
}, {
项目数量：3，
项目名称：“多洛”，
}, {
项目数量：4，
itemName:'坐下'，
}]
$（文档）.ready（函数（）{
var cart=$（'.cart items'）；
函数pops（）{
cart.empty（）；
carted_prods.forEach（函数（元素、索引）{
让$template=$（$（'#cartItem'）.text（）；
$template.find（'input'）.val（element.itemQuantity）；
$template.find（'.item name'）.text（element.itemName）；
$template.find（'li'）.addClass（'no'+index.toString）；
$（“#购物车项目”）.append（$template）；
});
}
pops（）；
});


项目1
每单位数量

价格：12.55
总数：

202

命令


同侧眼线

我明白了

您需要移动
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=[{
项目数量：1，
itemName:'Lorem'，
}, {
项目数量：2，
itemName:“Ipsum”，
}, {
项目数量：3，
项目名称：“多洛”，
}, {
项目数量：4，
itemName:'坐下'，
}]
$（文档）.ready（函数（）{
var cart=$（'.cart items'）；
函数pops（）{
cart.empty（）；
carted_prods.forEach（函数（元素、索引）{
让$template=$（$（'#cartItem'）.text（）；
$template.find（'input'）.val（element.itemQuantity）；
$template.find（'.item name'）.text（element.itemName）；
$template.find（'li'）.addClass（'no'+index.toString）；
$（“#购物车项目”）.append（$template）；
});
}
pops（）；
});


项目1
每单位数量

价格：12.55
总数：

202

命令


同侧眼线

我明白了

它起作用了，但是您能进一步向我解释一下解决方案吗？在最初的版本中，我完全搞糊涂了。您创建了一个新的jQuery对象，该对象在
$template
变量中引用。在循环的每次迭代中，您都会更新这个
$template
变量，这反过来会影响DOM中的相同元素。要创建新元素，您需要创建一个新的jQuery对象，这就是为什么您需要在循环中移动
$template
。这是可行的，但您能否进一步向我解释一下解决方案？我完全不明白，在最初您创建的
$template
变量中引用的新jQuery对象中。在循环的每次迭代中，您都会更新这个
$template
变量，这反过来会影响DOM中的相同元素。要创建新元素，需要创建一个新的jQuery对象，这就是为什么需要在循环中移动
$template
。