Javascript 每 n 个，创建新行

Javascript every nth, create new row

本文关键字：创建 新行 Javascript      更新时间：2023-09-26

我有一个产品页面，我想在每行显示 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，我假设它需要创建一个新行。

感谢您提供的任何帮助或意见。

首先，无需自行处理count变量，.each()函数已经提供了一个索引元素（作为可选参数）。

使用 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>';

向左走，不要！请改用 CSS。

设置您的span3类样式，使其具有30%的内联块显示。这样，当您决定每行显示 2、4 或 60 个时，您只需要更改 CSS。这也允许您使用 CSS 媒体查询更改每行的项目数，以用于不同的视口，例如移动视口。

此外，这样您就不必担心在返回的项目不能被 3 整除时关闭行

附带说明一下，如果您决定采用 CSS 路线，请考虑改用 <ul> 和 <li>，因为您有一个列表。

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

更新 Fiddle 更新以演示li的使用和此方法的灵活性。

你应该使用模数：http://msdn.microsoft.com/en-us/library/ie/9f59bza0（v=vs.94）.aspx它为您提供了除以两个数字的余数，因此您可以使用类似以下内容（在您的 .each 中）来执行此操作：

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

$（this）.index（） 返回 .each（） 的索引，% 2 返回该索引的余数除以 2，因此前 3 次运行如下所示：

  • 0/2 = 0 = 添加一行
  • 1/2 = .5 = 不添加行
  • 2/2 = 1 = 不添加行

希望这就是你的意思。

以下是

我认为更干净的方法：

// 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))
    );
}

解决问题的最佳方法是使用 jquery 模板。 您可以通过 ajax 请求获取 JSON 格式的数据，并通过 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>

目录：

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

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

这样的事情应该有效

相关文章：