jquery - 根据 ID 按顺序显示 LI

Question

我正在创建一个 for 循环，它调用 javascript 效果并将其应用于 LI，按顺序执行。这是我得到的:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

但是，这不起作用。我需要它将效果应用到 LI#1，然后是 LI#2、LI#3...等等。

我想要做的事情与 Twitter 所做的类似，当您单击页面底部的“更多”按钮时，我希望它能够缓和下来，而不是跳转。

编辑:我不能只将 LI 包装在 DIV 中，因为我要将 LI 添加到 UL 元素。

但是，如果有一种方法可以在 UL 大小改变时为其设置动画，我会全力以赴。

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

看看show( speed, [callback] ) 。来自文档:

Show all matched elements using a graceful animation and firing an optional callback after completion.

The height, width, and opacity of each of the matched elements are changed dynamically according to the specified speed.

此外，还有其他方法可以隐藏和显示元素，例如 fadeIn和 fadeOut 。看看http://docs.jquery.com/Effects .

我用静态数据快速模拟了您想要的东西:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

并且它有效，因此可以想象您可以执行类似以下的操作，而不必担心迭代元素 ID 的麻烦:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

需要明确的是，上面对 $.load 的调用假设您网站上 /items/?p=2 的输出是一堆 LI