Question

This might be a simple task, but I’m kinda stuck doing it.

I have a list with the following structure:

<ul id='index_orders'>
 <li data-role='list-divider'>Awaiting picking</li>
 <li>Blah blah</li>
 <li data-role='list-divider' id='index_orders_ad_divider'>Awaiting delivery</li>
 <li>Blah blah</li>
</ul>

I’m firing off an ajax call to grab a list of awaiting orders under the <li id='index_orders_ad_divider'> entry.

So far i’ve gotten this far, but can’t seem to figure out how to first remove all the <li> that appear after the <li> with the id of “index_orders_ad_divider”, before appending the new ones:

    $.getJSON(root_url + $(this).attr('href') + '?callback=?', null, function (d) {
        $("#index_orders_ad_divider").after(d.html);
        $("#index_orders").listview('refresh');
        $("#index_pickedOrders_count").html($("#index_pickedOrders > li").length);
        $.mobile.loading('hide');
    });

Answer 1

Here’s one way to do this, unfortunately it takes two steps though:

$.getJSON(root_url + $(this).attr('href') + '?callback=?', null, function (d) {
    // Cache $el since we're using it a couple times.
    var $el = $("#index_orders_ad_divider");

    // Remove all <li>s after this one
    $("#index_orders li:gt(" + $el.index() + ")").remove();

    // Insert the new <li>s after this one.
    $el.after(d.html);

    $("#index_orders").listview('refresh');
    $("#index_pickedOrders_count").html($("#index_pickedOrders > li").length);
    $.mobile.loading('hide');
});

Example: http://jsfiddle.net/6zAN7/3/