Question

我有UL：

<ul id="news-feed">.....</ul>

我希望能够将LI附加到列表顶部，并将附加项目slideDown到位。

$("#news-feed").append('<li">This is my item</li>').hide().slideDown();

我遇到的问题是上面的代码是向下滑动新闻Feed项目，而不是附加项目。有什么想法吗？

Answer 1

如果您希望将它们全部链接在一起，则可以使用appendTo()代替。它将返回新的<li>元素，以便您可以将其向下滑动。

$('<li>This is my item</li>').appendTo("#news-feed").hide().slideDown();

编辑：正如@cletus所说，你应该像他在答案中使用.prependTo()而不是.appendTo()。这会将新项目置于列表的顶部。

Answer 2

如果您想将它们很好地链接在一起，请将其翻转并使用prependTo()代替prepend()。之一：

$("<li>").text("This is my item").hide().prependTo("#news-feed").slideDown();

或

$("<li>This is my item</li>").hide().prependTo("#news-feed").slideDown();

我更喜欢第一个因为它处理转义。第二个没有。但这在很大程度上取决于偏好。

Answer 3

通常我们这样说：

var newsItem = $("<ul></ul>"); // Create a template item and clone from it

var parentItem = $( /* whatever selector string */ );

//  …

newsItem.clone().text("blah").hide().appendTo(parentItem).toggle('slide');

此外，当您说“添加到列表顶部”时，通常prepend()的效果会更好。

Answer 4

是的，首先你需要让它显示为none，然后让它向下滑动：

$("#news-feed").append('<li style="display:none">This is my item</li>').find('li:last').slideDown();

如果这不起作用，请将其分为两个语句：

$('#news-feed').append('<li style="display:none">This is my item</li>');
$('#news-feed li:last').slideDown();

JQUERY，将LI附加到UL，然后设置LI的动画

4 个答案: