Formatting the results of each statement inside the grid?

Question

So, I took and analyzed some data, and I use “each” 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>"); }); } } }); 

And for the grid to work properly, you must follow 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> 

So my question is: how would I sort each statement and put every 4 elements on a new line and every fourth element has a class of “threecol last” instead of “threecol”?

Answer 1

Add a counter before the $.each , and then add some simple conditions to insert the rows into the correct position and assign the correct classes:

 if (c % 4 == 0) { $('<div />').addClass('row').appendTo('.container'); } $('<div />').addClass('threecol') .text('title: ' + e.title) .appendTo('.row:last'); if (c % 4 == 3) { $('.threecol:last').addClass('last'); } c++;