2

我一直在创建一个 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();

我假设我遗漏了一些东西，这可能有一个非常简单的解决方案。

提前致谢 ：）

4

2 回答 2

4

您非常接近，您只需要附加正确的 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/

于 2012-09-12T10:56:39.527 回答
1 
$(data).find('.list-divider').remove();

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

于 2012-09-12T10:58:08.627 回答