Javascript каждый nth, создайте новую строку

Question

У меня есть страница продуктов, в которой я хочу показать 3 элемента в каждой строке, а затем, если у нее больше, создайте новую строку и покажите больше. Так что 3 столбца за строку с неограниченными рядами. Ниже приведен код, который у меня есть, который содержит мой цикл, который я предполагаю, что код должен будет войти.

$(data).find('products').each(function() { 

      itemName = $(this).find('itemName').text(); 
      itemDesc = $(this).find('itemDesc').text(); 
      itemID = $(this).find('id').text(); 

       items +='<div class="row-fluid">\ 
       <div class="span3">Col 1</div>\ 
       <div class="span3">Col 2</div>\ 
       <div class="span3">Col 3</div>\ 
       </div>'; 

      count++; 

     }); 

Здесь я должен это сделать, но я немного зациклен на том, как подойти к этому. Если подсчет делится на 3, я предполагаю, что ему понадобится создать новую строку.

Спасибо за любую помощь или вклад, которые вы можете предоставить.

Answer 1

Прежде всего, вам не нужно обрабатывать переменную count по отдельности, функция .each() уже поставляет index element (в качестве необязательного аргумента).

С оператором modulus вы можете получить остаток от деления index на 3. Затем вы можете указать, когда вам нужно распечатать открытие строки и ее окончание.

$(data).find('products').each(function(index) { 

    itemName = $(this).find('itemName').text(); 
    itemDesc = $(this).find('itemDesc').text(); 
    itemID = $(this).find('id').text(); 

     if ((index % 3) == 0) items += '<div class="row-fluid">'; 

     items += '<div class="span3">Col 1</div>'; 

     if ((index % 3) == 2) items += '</div>'; 
}); 

if (items.substr(-12) != '</div></div>') items += '</div>'; 

Answer 2

Вы должны использовать модуль: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx Это дает остаток назад от деления двух чисел, чтобы вы могли, вероятно, сделать это с чем-то вроде (внутри вашей .each):

if(!($(this).index() % 2)){ 
    // Add your row 
} 

$ (это) .index() возвращает индекс вашего .each() и% 2 возвращает остаток от этого показателя, деленное на 2, так что первые 3 раза это работает, это было бы так:

• 0/2 = 0 = добавить строку
• 1/2 = 0,5 = не добавить строку
• 2/2 = 1 = не добавить строку

Надеюсь, это то, что вы имели в виду.

Answer 3

Вот что я думаю, что это уборщик подход:

// Map each product to a cell. 
var cells = $(data).find('products').map(function() { 
    var itemName = $(this).find('itemName').text(); 
    var itemDesc = $(this).find('itemDesc').text(); 
    var itemID = $(this).find('id').text(); 
    return $('<div></div>').addClass('span3').text(itemName+' '+itemDesc+' '+itemID); 
}); 

// Collect the cells into rows. 
var rows = []; 
for (var i=0, j=cells.length; i<j; i+=3) { 
    rows.push(
     $('<div></div>') 
     .addClass('row-fluid') 
     .append(cells.slice(i,i+3)) 
    ); 
} 

Answer 4

Наилучший подход к вашему вопросу, используя шаблон Jquery. вы можете получить ваши данные в формате Json по Ajax запроса и создания строк динамически по шаблону JQuery:

<script src="jquery.tmpl.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    var data = [ 
    { name: "Astor", product: "astor", stocklevel: "10", price: 2.99}, 
    { name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99}, 
    { name: "Rose", product: "rose", stocklevel: "2", price: 4.99}, 
    { name: "Peony", product: "peony", stocklevel: "0", price: 1.50}, 
    { name: "Primula", product: "primula", stocklevel: "1", price: 3.12}, 
    { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99}, 
    ]; 
    $('#flowerTmpl').tmpl(data).appendTo('#row1'); 
    }); 
    </script> 

    <script id="flowerTmpl" type="text/x-jquery-tmpl"> 
    <div class="dcell"> 
    <img src="${product}.png"/> 
    <label for="${product}">${name}:</label> 
    <input name="${product}" data-price="${price}" data-stock="${stocklevel}" 
    value="0" required /> 
    </div> 
    </script> 

Html:

<div id="row1" class="drow"></div> 

Answer 5

var $products = $(data).find('products'); 
var num_of_rows = Math.ceil($products.length/3) 
//Create your rows here each row should have an id = "row" + it's index 
$products.each(function(i,val){ 
    var row_index = Math.ceil(i/3) 
    $('#row' + row_index).append("<div>Col"+i%3+"</div>") 
}); 

Нечто подобное должно работать

Answer 6

Going левое поле , не надо! Вместо этого используйте CSS.

Создайте свой класс span3, чтобы иметь с 30%% с дисплеем встроенного блока. Таким образом, когда вы решите отображать 2, 4 или 60 строк, вам нужно только изменить CSS. Это также позволяет вам изменить количество элементов в строке с помощью запросов в формате CSS для разных видовых экранов, например. мобильный.

Более того, этот способ вам не нужно беспокоиться о закрытии строки, когда ваши возвращенные детали не делятся на 3

На стороне записки, если вы решите пойти по пути CSS, рассмотреть возможность использования <ul> и <li> вместо этого, как семантика, у вас есть список.

http://jsfiddle.net/UKQef/1/

Update Fiddle обновлен для демонстрации использования li и гибкость этого подхода.