PHP AJAX pagination load items into multiple containers

Question

I would like to create a simple "load more" button but I have a three column design which makes it a little comlicated because I only want to load the items into their parent element. I used infinite ajax scroll on other sites but in this case it doesn't work or it works if I set the items to load to the parent element.

my html layout looks like this:

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

So, if its possible I want to load only the elements into its appropriate column. Is there a solution for this or do I need to load the column divs and figure out a way with css to make it look nice? Oh almost forgot if I don't have any JS/AJAX than the load more link works like any other php-mysql pagination (for example like on a joomla blog layout) and the data returned and printed is the same as the html code above.

I hope my question is clear.

Answer 1

If your AJAX call is returning HTML, you can set that into a jQuery object then retrieve specific parts of it. This is untested, but in principle it should work:

"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");
}