[jQuery] object scope

[jQuery] object scope


Hi,
I am following a tutorial on jQuery and somehow I could not understand
why this one does not work:
$(document).ready(function() {
    $('#news-feed').each(function() {
        var $container = $(this);
        $container.empty();
        $.get('news/feed.xml', function(data) {
            $('rss item', data).each(function() {
                //The link in h5
                var $link = $('<a></a>')
                    .attr('href', $('link',this).text())
                    .text($('title', this).text());
                var $headline = $('<h5></h5>').append($link);
                //The publication date
                var pubDate = new Date($('pubDate', this).text());
                var pubMonth = pubDate.getMonth() +1;
                var pubDay = pubDate.getDate();
                var pubYear = pubDate.getFullYear();
                var $publication = $('<div></div>')
                    .addClass('publication-date')
                    .text(pubMonth +'/'+ pubDay +'/'+ pubYear);
                //The publication summary
                var $summary = $('<div></div>')
                    .addClass('summary')
                    .html($('description', this).text());
                $('<div></div>')
                    .addClass('headline')
                    .append($headline, $publication, $summary)
                    .appendTo($container);
                //Setting up the rotator
                //$('.headline').eq(0).css('top', 0);
            });
        });
    });
    $('div.headline').eq(0).css('top', 0); //THIS DOES NOT WORK
});
whereas this work:
$(document).ready(function() {
    $('#news-feed').each(function() {
        var $container = $(this);
        $container.empty();
        $.get('news/feed.xml', function(data) {
            $('rss item', data).each(function() {
                //The link in h5
                var $link = $('<a></a>')
                    .attr('href', $('link',this).text())
                    .text($('title', this).text());
                var $headline = $('<h5></h5>').append($link);
                //The publication date
                var pubDate = new Date($('pubDate', this).text());
                var pubMonth = pubDate.getMonth() +1;
                var pubDay = pubDate.getDate();
                var pubYear = pubDate.getFullYear();
                var $publication = $('<div></div>')
                    .addClass('publication-date')
                    .text(pubMonth +'/'+ pubDay +'/'+ pubYear);
                //The publication summary
                var $summary = $('<div></div>')
                    .addClass('summary')
                    .html($('description', this).text());
                $('<div></div>')
                    .addClass('headline')
                    .append($headline, $publication, $summary)
                    .appendTo($container);
                //Setting up the rotator
                //$('.headline').eq(0).css('top', 0);
            });
     $('div.headline').eq(0).css('top', 0); //THIS WORKS
        });
    });
});
The HTML source is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
        <title>Rotator and Shufflers</title>
        <link rel="stylesheet" href="headlineRotator.css" media="screen"
type="text/css">
        <script src="jquery.js" type="text/javascript"></script>
        <script src="headlineRotator.js" type="text/javascript"></script>
    </head>
    <body>
        <h3>Recent News</h3>
        <div id="news-feed">
            <a href="news/index.html">News Release</a>
        </div>
    </body>
</html>