jquery - 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> 出现在<li>id 为“index_orders_ad_divider”之后的所有内容，然后再添加新的内容：

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