jquery - formatting each statement results inside a grid? -
so have fetched , parsed data , using 'each' 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 grid function needs follow 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 question is, how sort through each statement , place every 4 items new row , make every 4th item have class "threecol last" instead of "threecol"?
add counter before $.each
loop, , add simple conditions insert rows
@ correct position, , assign 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++;
Comments
Post a Comment