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'>条目下的等待订单列表。

到目前为止，我已经走到了这一步，但似乎无法弄清楚如何首先删除 ID 为"index_orders_ad_divider"的<li>后面出现的所有<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/