jQuery $ .get（）某些元素但删除任何不需要的东西然后追加

Question

我一直在创建一个WordPress主题，并且在将所需的新内容插入DOM时有点困难。

为了简化我的问题，我试图将这个例子放在一起，没有说明我的目标。

请考虑以下事项：

首页html内容

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

下一页html内容

<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
    });

通过上述内容，我可以成功地将新列表项附加到无序列表中（如果上面的示例已正确粘贴）。

我尝试做的是从<li class="list-divider">收到的数据中删除$.get()，并仅附加<li class="list-item">项。

尝试达到上述要求的非功能代码示例：

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

我认为我错过了一些东西，这可能是一个非常简单的解决方案。

提前致谢：）

Answer 1

你非常接近，你只需要附加正确的jQuery元素，而不是尝试从HTML中删除错误的元素：

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

示例 - http://jsfiddle.net/ccGes/

Answer 2

$(data).find('.list-divider').remove();

这将从响应中删除具有class list-divider的li。