jQuery .find() method not working

Question

I am working on a twitter feed related project and using Tweetie-master jQuery plugins.

Link: https://github.com/seaofclouds/tweet

But unfortunately jQuery .find() method not working at all. I tried a lot but could not find the error.

<script type="text/javascript">
$(document).ready(function() {
    $('#twitter_feed').twittie({
        dateFormat: '%b. %d, %Y',
        template: '{{avatar}} {{tweet}} {{screen_name}} {{date}}',
        count: 3
    });
    $("#twitter_feed ul").find("li:first").css({"color":"red","border":"2px solid red"});
});
</script>

My project demo link: http://zinan.me/twitter/

Answer 1

It does not work because when the $("#twitter_feed ul").find("li:first") is executed, no tweet has been loaded, so no li exists. You should use a callback function, if I do understand twittie :

$('#twitter_feed').twittie({
    dateFormat: '%b. %d, %Y',
    template: '{{avatar}} {{tweet}} {{screen_name}} {{date}}',
    count: 3
}, function () {
    $("#twitter_feed ul").find("li:first").css({"color":"red","border":"2px solid red"});
});

Answer 2

My guess is that twittie() is async, so code is not waiting for response. Before twittie returns anything, code executes find and finds nothing. Look for twittie() callback functions.

Answer 3

As @Holt pointed that the jquery code is executed before the div is populated. If you want to change only first li's style then you can do it using CSS also:

#twitter_feed ul li:first-child { color: #F00; border: 1px solid #F00;}

Answer 4

I think this should work not tested it though but worth a try

<script type="text/javascript">
$(document).ready(function() {
    $('#twitter_feed').twittie({
        dateFormat: '%b. %d, %Y',
        template: '{{avatar}} {{tweet}} {{screen_name}} {{date}}',
        count: 3
    }).promise().done(function(){
        $("#twitter_feed ul").find("li:first").css({"color":"red","border":"2px solid red"});
    });

});
</script>