Форматирование результатов каждого оператора внутри сетки?

Question

Так что я принес и разобраны некоторые данные, и я использую «каждый», чтобы отобразить его:

$.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>"); 
      }); 
     } 
    } 
}); 

И для сетки, чтобы функционировать должным образом, она должна следовать этой структуры:

<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> 

Поэтому мой вопрос заключается в том, как бы я сортировал каждое утверждение и помещал каждые 4 элемента в новую строку и каждый четвертый элемент имел класс «threecol last» вместо «threecol»?

Answer 1

Добавить счетчик до вашего $.each цикла, а затем добавить некоторые простые условия, чтобы вставить rows в правильном положении, и назначить правильные классы:

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++;