无法使用jquery添加多个li

Question

我有一个要制作的购物车，订单在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的最后一条记录

Answer 1

您需要移动var $template = $($('#cartItem').text()); 内部