PHP AJAX分頁將項目加載到多個容器中

Question

我想創建一個簡單的“加載更多”按鈕，但是我采用了三列設計，這使其有點復雜，因為我只想將項目加載到其父元素中。 我在其他站點上使用了無限ajax滾動，但是在這種情況下，它不起作用，或者如果我將項目設置為加載到父元素，則它可以工作。

我的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，那么加載更多的鏈接就可以像其他任何php-mysql分頁一樣工作（例如，在joomla博客布局上），並且返回和打印的數據與上面的html代碼相同。

希望我的問題清楚。

Answer 1

如果您的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");
}