Javascript PHP AJAX分页将项目加载到多个容器中

我想创建一个简单的LoadMore按钮，但是我有一个三列的设计，这使得它有点复杂，因为我只想将项目加载到它们的父元素中。我在其他网站上使用了infinite ajax scroll，但在本例中，如果我将项目设置为加载到父元素，则它不起作用

我的html布局如下所示：

<div id="container">
  <div class="firstcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
  <div class="secondcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
  <div class="thirdcol column">
    <article class="item">Content</article>
    <article class="item">Content</article>
    <article class="item">Content</article>
  </div>
</div>
<div class="padination">
  <a class="next" href="http://example.com/?start=10">load more</a>
</div> 

因此，如果可能的话，我只想将元素加载到相应的列中。 是否有解决方案，或者我需要加载列div并找到一种使用css使其看起来更漂亮的方法？ 哦，差点忘了如果我没有任何JS/AJAX，那么load more链接的工作原理与任何其他php mysql分页类似，例如在joomla博客布局上，返回和打印的数据与上面的html代码相同

---

我希望我的问题很清楚。

如果AJAX调用返回HTML，可以将其设置为jQuery对象，然后检索其中的特定部分。这是未经测试的，但原则上应该是可行的：

"success" : function(data) {
    //add articles from first col of return html
    var $html = $(data);
    $html.find("div.firstcol article").appendTo("div#container div.firstcol");
    $html.find("div.secondcol article").appendTo("div#container div.secondcol");
    $html.find("div.thirdcol article").appendTo("div#container div.thirdcol");
}

---

看来这是可能的。但是，如果没有关于您要返回的数据结构的更多信息，我无法提出任何具体建议。这些数据与我发布的html代码相同，这就是为什么我写道分页的工作方式类似于joomla。或者您指的是js console.log数据？是什么决定了元素的适当列？我不太清楚你想做什么。如果您显示DOM的前后状态，可能会有所帮助。我正在尝试将您的解决方案实现为Infinite Ajax Scroll，但当我console.log数据/项时，它会返回类似以下对象的对象[div.firstcol，div.secondcol，div.thirdcol]如果I console.log是finddiv.firstcol文章，那么它会返回一个空Object，这是返回JSON或HTML的AJAX调用吗？实际上我不确定，documantation说“data”应该返回一个字符串，“items”应该返回一个数组，但是如果我记录“data”，那么它会返回如下内容：Object[，meta，meta，….footer，，script，]只是为了测试，如果你创建了一个textarea，并让success函数将它的值设置为返回值，它会给你类似于[Object]或实际HTML的东西吗？我不确定我是否理解你的意思。但是我在console.log$html.finddiv.firstcol上打印了一个scrn，也许会有帮助