基于ID的LIs序列显示

Question

我正在创建一个for循环，该循环调用javascript效果并将其应用于安莉，并按顺序执行。我要说的是：

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

然而，这是行不通的。我需要它把效果应用于LI#1然后LI#2，LI#3.诸若此类。

我试图做的是类似于当你点击页面底部的“更多”按钮，而不是跳跃，我希望它轻松下来。

编辑：--我不能仅仅将LIs包装在一个DIV中，因为我要将LIs添加到一个UL元素中。

然而，如果有一种方式来动画的UL，因为它改变了大小，我将是所有的。

Answer 1

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

看看显示(速度，[回拨])。从医生那里：

使用优美的动画显示所有匹配的元素，并在完成后触发可选回调。 每个匹配元素的高度、宽度和不透明度都会根据指定的速度动态更改。

此外，还有其他隐藏和显示元素的方法，如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的输出是一堆LIs

Answer 2

如果您希望每一个都以相同的速度出现，但是在每一个之间稍微延迟，您可能需要使用setTimeout.例如..。

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

这看起来有点傻，但如果我没记错的话，除非您将索引(i)封装在某种类型的附件中，否则执行的方法总是将i的值视为10。

Answer 3

另外，如果您在另一个通过Ajax加载新项目的事件上触发这个操作(比如在单击"More“按钮之后)，那么您需要将您的逻辑封装在.live()中，这在jQuery 1.3中是可用的。

如果您使用的是jQuery 1.2，则可以使用利夫科利。