Why isn't this jQuery working?

I have a list of <li> with style="displ开发者_开发问答ay:none", I want to show the first <li> by calling the following code, but it doesn't seem to work.

    $('.tweet_list li').first().css('display','list-item');

Click here to see the demo page, it currently doesn't display anything since thestyle="display:none" property.

I have also tried:

$('.tweet_list li').first().show();
$('.tweet_list li:first').show();

None of them work.

---

By setting a breakpoint on that line, you will find that at the time it is executed, your ul.tweet_list is empty.

Why? Because .tweet(), which populates the <ul>, is asynchronous: by the time your .css() line executes, the tweets have not loaded yet.

Digging through jquery.tweet.js, I found this line (line 233):

$(widget).trigger("loaded").trigger((tweets.length === 0 ? "empty" : "full"));

So it looks like you need to bind to the loaded event, and show the first tweet in there:

$("#twitter_update_list").bind("loaded", function () {
    $('.tweet_list li').first().css('display','list-item');
});

---

Try:

$('.tweet_list li').first().show();

---

There is no element declared to hold the tweet_list class you're referring to. It isn't created/assigned by your code, or static in the HTML. The issue may be that you're referring to an element that does not exist?

---

You also need to wrap everything in the document.ready - and why have 5 when you only show 1?

$(document).ready(function(){
  $("#twitter_update_list").tweet({
        username: ".....",
        avatar_size: 0,
        count: 1, //display up to 100 tweets, as permitted by the twitter search api
        loading_text: "loading tweets..."
      }).bind("loaded", function () { // code from @Box9
        $('.tweet_list li').first().css('display','list-item');
      });
});