After fetching and parsing some data, I have utilized the 'each' function to display it:
$.ajax({
url : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://news.google.com/news?pz=1&cf=all&ned=uk&hl=en&output=rss'),
dataType : 'json',
success : function (data) {
if (data.responseData.feed && data.responseData.feed.entries) {
$.each(data.responseData.feed.entries, function (i, e) {
$('.row').append("<div class=\"threecol\"">title: " + e.title + "<br></div>");
});
}
}
});
In order for the grid to work properly, it must adhere to this structure:
<div class="container">
<div class="row">
<div class="threecol">
</div>
<div class="threecol">
</div>
<div class="threecol">
</div>
<div class="threecol last">
</div>
</div>
</div>
My query revolves around how to organize the each loop so that every set of 4 items creates a new row, with the 4th item having the class "threecol last" instead of just "threecol"?