javascript - 使用动态样式jquery附加到现有的div

Question

大家好，我有一些挑战附加到现有的 div，现有的​​ div 有以下数据：

<div class="row isotope-grid">...</div>

但是在使用 asp.net core 从数据库加载数据后，我在浏览器中有以下内容：

    <div class="row isotope-grid" style="position: relative; height: 890px;">
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item wigs" style="position: absolute; left: 0%; top: 0px;">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="/images/476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg?v=clql7fMRxRm6EOgTPdinW74B9xv6lFre36t5VFvywJk" id="imgPix2" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="/Home/ProductDetail/1" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    AFRO KINKY
                                </a>

                                <input id="Id" name="Id" type="hidden" value="1">
                                <input id="Image1" name="Image1" type="hidden" value="/images/476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg">
                                <input id="Image2" name="Image2" type="hidden" value="/images/ed347c52-e1ab-4059-9207-742c04f6d242_KZ6OR.jpg">
                                <input id="Image3" name="Image3" type="hidden" value="/images/c3e337d0-fae6-4fe2-8f17-d36ccd28529f_ed1.jpg">
                                <input id="Description" name="Description" type="hidden" value="ROSA">
                                <input id="Price" name="Price" type="hidden" value="15000.00">
                                <input id="Size" name="Size" type="hidden" value="14">
                                <input id="ProdName" name="ProdName" type="hidden" value="AFRO KINKY">
                                <input id="Category" name="Category" type="hidden" value="Wigs">
                                <span class="stext-105 cl3">
                                    N 15000.00
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item wigs" style="position: absolute; left: 50%; top: 0px;">
                    <!-- Block2 -->
                    ...
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item wigs" style="position: absolute; left: 0%; top: 445px;">
                    <!-- Block2 -->
                    ...
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item braids" style="position: absolute; left: 50%; top: 445px;">
                    <!-- Block2 -->
                    ...
                </div>

最初它加载四个项目，但是当我单击加载更多按钮时，我希望它加载接下来的四个，这实际上是基于下面的 jquery 代码：

function loadMore(currentPage) {
    $.ajax({
        url: '/Home/GetMoreProducts',
        method: 'post',
        data: { count: currentPage },
        dataType: 'json',
        success: function (data) {
            var result = "";                
            $(data).each(function (index, emp) {
                result += '<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ' + emp.description2 + '" style="position:relative;"><div class="block2"><div class="block2-pic hov-img0"><div class="block2-pic hov-img0"><img id="imgPix2" src="' + emp.picPathMain + '" alt="IMG"><a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">Quick View</a ></div><div class="block2-txt flex-w flex-t p-t-14"><div class="block2-txt-child1 flex-col-l "><a href="/Home/ProductDetail/' + emp.id + '" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">' + emp.name + '</a><input id="Id" name="Id" type="hidden" value="' + emp.ID + '"><input id="Image1" name="Image1" type="hidden" value="' + emp.picPathMain + '"><input id="Image2" name="Image2" type="hidden" value="' + emp.picPathLeft + '"><input id="Image3" name="Image3" type="hidden" value="' + emp.picPathRight + '"><input id="Description" name="Description" type="hidden" value="' + emp.description + '"><input id="Price" name="Price" type="hidden" value="' + emp.price + '"><input id="Size" name="Size" type="hidden" value="' + emp.size + '"><input id="ProdName" name="ProdName" type="hidden" value="' + emp.name + '"><input id="Category" name="Category" type="hidden" value="' + emp.description2 + '"><span class="stext-105 cl3">' + 'N' + emp.price + '</span><div class="block2-txt-child2 flex-r p-t-3"><a href ="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2"><img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">  <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON"></a></div></div></div></div>';
            });
            
            $('.row.isotope-grid').append(result);                
        }
    });

我面临的挑战是，在使用 asp.net 核心进行后端提取期间，它创建了一些定位，当我使用 jquery 进行追加时，它不会这样做，它将新项目附加到位置 0，替换之前的任何内容. 虽然不是真正的替换，而是挡住了第一项的显示。

我真的不知道如何接近它。我希望我的问题足够清楚

谢谢

蒂姆

标签： javascripthtmljquerycss