jquery - 为什么 JQuery 中 'replaceWith' 函数上的数据没有被完全替换？

Question

我试图用另一个函数的结果替换通过ajax方法显示的当前数据，在第一种方法中，我使用了“append”方法，并使用新结果进行更新，我尝试了replaceWith函数，但问题是，它只显示单个值。

Displaying using append method:

 <script>
        $(document).ready(function () {
            function test() {
                $.ajax({
                    url: "WomenData",
                    method: "GET",
                    //data: { minimum_range: minimum_range, maximum_range: maximum_range },
                    success: function (vlist) {
                        for (var i in vlist) {

                        $('#card-group').append($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid='+vlist[i].mid+',mrate='+vlist[i].mrate+'" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));
                                          }
                }
            });

        }
        window.onload = test();
    });

Updating using replaceWith method

function load_product(minimum_range, maximum_range) {
                $.ajax({
                    url: "Women",
                    method: "POST",
                    data: { minimum_range: minimum_range, maximum_range: maximum_range },
                    success: function (vlist) {
                        for (var i in vlist) 
                        {
                            $('#card-group').replaceWith($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid=' + vlist[i].mid + ',mrate=' + vlist[i].mrate + '" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));

                        }

                    }

Answer 1

顾名思义，append 并不关心 div 已有的内容，而是继续推送 div 中的内容。

而 replaceWith 方法每次都会删除 div 的旧内容，然后添加新内容，从而使数组的最后一个索引成为 div 的内容 $('#card-group' )

这是正确的解决方案。只需清空循环外的 div 然后附加到它

$(document).ready(function () {
        function test() {
            $.ajax({
                url: "WomenData",
                method: "GET",
                //data: { minimum_range: minimum_range, maximum_range: maximum_range },
                success: function (vlist) {
                $('#card-group').empty();

                    for (var i in vlist) {

                    $('#card-group').append($('<div class="col-lg-3 col-sm-6 p-0"><div class="card product-men p-3"><div class="men-thumb-item"><img src="' + vlist[i].img1 + '" id="imgfront" class="card-img-top"><div class="men-cart-pro"><div class="inner-men-cart-pro"><a href="#" id="quickview" class="link-product-add-cart">Quick View</a>/</div></div></div><!-- card body --><div class="card-body  py-3 px-2"><h5 class="card-title text-capitalize" id="mname">' + vlist[i].mname + '</h5><div class="card-text d-flex justify-content-between"><p class="text-dark font-weight-bold" id="mprize">' + vlist[i].mprize + '</p><p class="line-through" id="mdprize">' + vlist[i].mdprize + '</p></div></div><!-- card footer --><div class="card-footer d-flex justify-content-end"><h3> <a href="Purchase/AddToCarts?mid='+vlist[i].mid+',mrate='+vlist[i].mrate+'" class="hub-cart phub-cart btn">Add To Cart</a></h3></div></div></div>'));
                                      }
            }
        });

    }
    window.onload = test();
});