Question

I am using the Google Feed API to pull four items from an RSS feed. I want to style the last item on the list (the fourth) differently from the first three. It seems like there must be a simple way–but I can’t seem to figure it out. Here’s what I’ve got:

google.load("feeds", "1");

function initialize() {
    var feed = new google.feeds.Feed("http://the-url-of-my-feed");
    feed.load(function(result) {
        if (!result.error) {
            var container = document.getElementById("joes-teaser");
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                var li = document.createElement("li");
                li.innerHTML = '<a href="' + entry.link + '" target="_blank">' 
                    + entry.title + '<span>More &raquo;</span></a>';
                container.appendChild(li);
            }
        }
    });
}
google.setOnLoadCallback(initialize);

That gives me a nice list of four li items, but I want the last, and only the last, to have a css id of something else–maybe joes-teaser-last or whatever.

Answer 1

In your loop you can check if i is the last one by comparing it to the entries’ length.

for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];

    var li = document.createElement("li");
    if (i == result.feed.entries.length - 1) {
        li.className = "lastLi";
    }
    li.innerHTML = '<a href="' + entry.link + '" target="_blank">' + entry.title + '<span>More &raquo;</span></a>';
    container.appendChild(li);
}