jQuery，在 <ul> 中显示第一个元素答案

【问题标题】：jQuery, display first element in a <ul>jQuery，在 <ul> 中显示第一个元素
【发布时间】：2011-01-26 17:14:38
【问题描述】：

我正在使用这个 JavaScript 代码来显示来自 twitter 的推文：

http://jsfiddle.net/mLwjA/

我想一次显示一条推文。我似乎无法选择第一个列表项。我试过了

$("ul#twitter_update_list li:first").fadeIn(1000);

但这也没有用！我需要知道如何淡出第一条推文，然后淡入第二条推文。

关于如何解决此问题的任何建议？

【问题讨论】：

仅供参考，jsFiddle 将为您填充 html、head 和 body 标签。只需将您的内容（原始数据）放在每个框中，右下角的窗口就会将它们放在页面的正确部分。
代码对我不起作用：-/
是的，我不知道为什么它在 jsFiddle 中不好玩，但它可以在我的浏览器中使用实际文件。

标签： javascript jquery list html-lists

【解决方案1】：

@thegreyspot：只需将 numTweets 更改为 1..？

$(document).ready(function() {
    $("#twitter").getTwitter({
        userName: "thewhitespot",
        numTweets: 1,
        loaderText: "Loading tweets...",
        slideIn: true,
        showHeading: false,
        headingText: "Latest Tweets",
        showProfileLink: false
    });
});

更新

按顺序淡入每个项目的工作示例：http://jsfiddle.net/SWvPS/1/

另一个更新

淡入第一项然后向上滑动，然后淡入第二项然后向上滑动：http://jsfiddle.net/ErcNA/2/

【讨论】：

顺便说一句，使用您的帐户，将numTweets 设置为 2 会显示“最新”，因为该插件不适用于转发。
我想显示多个推文。但一次一个。淡入，然后淡出，然后进入
@thegreyspot：好的，我更新了我的答案（+1 必须转到@patrick dw 以获得他的delay() 灵感）
也感谢您提供解决方案
如果你不介意，你能告诉我如何显示第一个，然后删除它，然后显示下一个吗？我尝试了很多变体： $(this).hide.delay(i * 1000).fadeIn(3000).delay(i * 1000).remove();但似乎没有一个工作：/很沮丧哈哈

【解决方案2】：

编辑：要更直接地回答您的问题，按顺序淡入，请执行以下操作：

$("ul#twitter_update_list li").each(function(i) {
    $(this).delay( i * 1000).fadeIn(1000); 
});

这在each()^(docs)循环中使用delay()^(docs)，利用回调中的索引参数将每个项目的fadeIn()^(docs)延迟i * 1000毫秒。

原答案：

您的 jsfiddle 示例存在几个问题：

您需要从左侧菜单中选择jQuery 库。您目前选择了MooTools。
您在window.onload 添加getTwitter 插件，但在页面加载时调用插件。因此，当您调用它时，该插件不存在。

这是您的示例，将您的代码放在getTwitter 插件之后，然后从左侧的菜单中选择jQuery 和onDomReady。

示例： http://jsfiddle.net/mLwjA/12/

【讨论】：

【解决方案3】：

试试$("ul#twitter_update_list li:first-child")

【讨论】：

【解决方案4】：

你也可以试试这个：

$("ul#twitter_update_list li").eq(0).fadeIn(1000);

【讨论】：

似乎无法让这个工作。我更想要这个解决方案。这就是我所拥有的：jsfiddle.net/XAJTC/7