Jquery -追加ajax接收到的内容以及预加载器

Question

我为我的cms创建了一个类似于流行的无限滚动wordpress插件的函数。当我滚动到页面底部并追加它们时，它会从db加载下一页。

首先它对页面列表中存在的元素进行计数：

var $number = $(".pages-3 li").length;

Number作为参数传递给php，以便从数据库中获取下一页内容：

$.ajax({
    type: "POST",
    url:"ajax.php",  
    data: { number: $number},
    beforeSend:function(){
    $(".pages-3").append('<li>LOADING</li>');},
    success:function(data) {
    $(".pages-3 li:nth-last-of-type(1)").html(data);
}

然而，这其中存在一个问题。我想添加预加载器，所以在ajax开始之前，我已经将列表项添加到列表中。然后我会用实际的页面内容替换这个项目的内容。

在追加预加载器列表项之前会对列表项进行计数。因此从理论上讲，脚本应该始终提供正确数量的列表位置。

然而，只有第一次的数字是正确的。然后数字比2大，再比3大。我真的不明白为什么。

Answer 1

尝试在成功回调中使用:contains()，

success:function(){
    $(".pages-3 li:contains(LOADING)").html(data);
}

或者您可以使用:last-child，如下所示

success:function(){
    $(".pages-3 li:last-child").html(data);
}

Answer 2

由于您添加的每个列表项的计数都会减少1，因此您添加的数据听起来像是包含列表项。例如，如果变量data已经包装在li标记中，您将获得嵌套标记(<li><li>Content</li></li>)，因为jQuerys .html()处理元素的内部HTML。

要避免这种情况，请使用>仅匹配直接后代，如下所示：

var $number = $(".pages-3 > li").length;

为了避免将预加载器与实际内容混淆(并使您的代码更清晰)，您可以给它一个类，以指示它是一个预加载器。出于显而易见的原因，我们将其命名为preloader

 $(".pages-3").append('<li class="preloader">LOADING</li>');

然后，在计算元素数量时，排除具有preloader类的元素

var $number = $(".pages-3 > li:not(.preloader)").length;

最后，在实际加载内容时删除该类：

$(".pages-3 > li.preloader").html(data).removeClass("preloader");