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

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

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

有人能指出为什么它插入到最后一个div中，而不是在它之后，以及我如何纠正这个问题吗

加载文档：

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

目标为最后一辆

车辆列表

div

您可以尝试以下方式：

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

---

你可能不得不以不同的方式来处理这个问题。如前所述，load（）接受响应并将其加载到它所操作的元素中。因为它替换了内容，所以它并不真正适合您试图做的事情，即向现有元素附加额外的内容。您最好的选择可能是使用ajax方法

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

---

以下是对我有效的方法： 在第一个文件中最后一个车辆列表后添加一个空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>

1.
2.
3.
4.
5.
6.

并更改您的JS

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

$（“#容器”）.load（'http://aba.bbtj.dev/test2.html“+”.vehicleListing'，函数（）{
$（'#容器'）。替换为（函数（）{
返回$（'vehicleListing'，本）；
});
$（“”）.insertAfter（“.vehicleListing:last”）；
});

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

---

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

Afaik，$namespace上不存在load。它存在于$.fn命名空间上。另外，在像load（）这样的异步方法中使用insertAfter（）很可能是不起作用的逻辑。这正是我想要做的。非常感谢。

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

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

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

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