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

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

2 个答案: