Question

我正在处理列表页面，我正在尝试创建“加载更多项目”功能。我试图使用.load（）从另一个页面url（第二个列表页面）追加所有“.vehicleListing”元素，并在最后一次出现一个类为“vehicleListing”的div之后添加它们。

第1页：

zip(*)

第2页：

for i,j in zip(*idx):
     print(i,j)

期望的结果：执行“加载更多”功能后的第1页：

<div class="overview-feature-1">
    <div class="vehicleListing">1</div>
    <div class="vehicleListing">2</div>
    <div class="vehicleListing">3</div>
    <div class="vehicleListing">4</div>
    <div class="vehicleListing">5</div>
    <div class="vehicleListing">6</div>

    <div class="controls"></div>
    <div class="additional-controls"></div>
</div>

这是我到目前为止所做的，但是它一直将它添加到最后一个vehicleListing div而不是之后。

<div class="overview-feature-1">
    <div class="vehicleListing">7</div>
    <div class="vehicleListing">8</div>
    <div class="vehicleListing">9</div>
    <div class="vehicleListing">10</div>
    <div class="vehicleListing">11</div>
    <div class="vehicleListing">12</div>

    <div class="controls"></div>
    <div class="additional-controls"></div>
</div>

有人可以指出它为什么插入最后一个div而不是它之后，我怎么能纠正这个？

Answer 1

这对我有用：在第一个文件中的最后一个 vehicleListing 后添加一个空div

<div class="overview-feature-1">
    <div class="vehicleListing">1</div>
    <div class="vehicleListing">2</div>
    <div class="vehicleListing">3</div>
    <div class="vehicleListing">4</div>
    <div class="vehicleListing">5</div>
    <div class="vehicleListing">6</div>

    <div id="container"></div>

    <div class="controls"></div>
    <div class="additional-controls"></div>
</div>

改变你的JS

  $("#container").load('http://aba.bbtj.dev/test2.html' + ' .vehicleListing', function(){
    $('#container').replaceWith(function() {
     return $('.vehicleListing', this);
    });
    $( '<div id="container"></div>' ).insertAfter( ".vehicleListing:last" );
  });

这将在空div中加载新车辆，然后移除该div并保留新车辆（使用replaceWith功能）。

然后我们重新添加空div以便能够添加更多的车辆。

Answer 2

加载documntation：

描述：从服务器加载数据并将返回的HTML放入匹配的元素中。

$(".vehicleListing").after().last()

定位最后一个vehicleListing div。

你可以试试像：

$.load('page2url' + ' .vehicleListing').insertAfter(".vehicleListing:last");

Answer 3

你可能不得不以不同的方式解决这个问题。如上所述，load（）接受响应并将其加载到它正在操作的元素中。由于它取代了内容，因此它并不适合您尝试做的事情，即将附加内容附加到现有元素。你最好的选择是使用ajax方法。

$.get('page2url' + ' .vehicleListing', function(data){
    $(".vehicleListing").last().after(data);
});

jQuery：在页面上最后一次出现特定的类元素后，从.load（）添加多个元素

3 个答案: