Question

I have been creating a WordPress theme and have got a bit stuck with inserting the exact required new content into DOM.

To simplify my problem, I have attempted to put together this example without all the cruft to demonstrate my goal.

Consider the following:

First page html contents

<ul class="ordered-list">
    <li class="list-divider">
        First Result Page <span>A counter</span>
    </li>
    <li class="list-item">
        Result 1
    </li>
    <li class="list-item">
        Result 2
    </li>
</ul>
<div id="load-more">
    <a href="#">Load More</a>
</div>

Next page html contents

<ul class="ordered-list">
    <li class="list-divider">
        Second Result Page <span>A counter</span>
    </li>
    <li class="list-item">
        Result 3
    </li>
    <li class="list-item">
        Result 4
    </li>
</ul>
<div id="load-more">
    <a href="#">Load More</a>
</div>

jQuery

$('#load-more a').click(function() {
    $.get('http://example.com/nextpage', function(data){
         $(".ordered-list").append(
             $(data).find('.ordered-list').html() // get the li's from data
         ); // append the new li's to the First page
    });

With the above I am able to successfully append the new list items into the unordered list (if my above example has been pasted correctly).

What I an attempting to do is to remove <li class="list-divider"> from the data received by $.get() and only append the <li class="list-item"> items.

An example of non functioning code to try to achieve the above requirement:

// get the li's from data but get rid of li.list-divider
$(data).find('.ordered-list').remove('.list-divider').html();

I assume I am missing something and this possibly has a very easy solution.

Thanks in advance 🙂

Answer 1

You were very close, you just need to append the correct jQuery elements rather than try to remove the wrong ones from the HTML:

$.get('http://example.com/nextpage', function(data){
     $(".ordered-list").append(
         $(data).find('li.list-item') // append the actual li elements themselves
     ); 
});

Example – http://jsfiddle.net/ccGes/