jquery替换列表中的选择器后的元素

Question

这可能是一个简单的任务，但我有点卡住这样做。

我有以下结构的列表：

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

我发射了一个AJAX调用抢<li id='index_orders_ad_divider'>条目下待命的列表。

到目前为止，我已经得到了远这一点，但似乎无法弄清楚如何先删除所有与<li>的“index_orders_ad_divider” ID之后出现的<li>，追加新的之前：

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

下面是做到这一点的一种方式，遗憾的是它需要两个步骤，但：

$.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'); 
}); 

例子：http://jsfiddle.net/6zAN7/3/