Fatal编程技术网

每n个Javascript，创建新行

javascript html loops

每n个Javascript，创建新行,javascript,html,loops,Javascript,Html,Loops,我有一个产品页面，我想在每一行中显示3个项目，如果它有更多项目，则创建一个新行并显示更多项目。因此，每行3列，行数不限。下面是包含我的循环的代码，我假设代码需要进入循环 $(data).find('products').each(function() { itemName = $(this).find('itemName').text(); itemDesc = $(this).find('itemDesc').text();

我有一个产品页面，我想在每一行中显示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++;

        });

$（数据）。查找（'products'）。每个（函数（）{
itemName=$（this.find（'itemName'）.text（）；
itemDesc=$（this.find（'itemDesc'）.text（）；
itemID=$（this.find（'id'）.text（）；
项目+='\
第1列\
第2列\
第3列\
';
计数++；
});
这里是我需要做的，但我有点被困在如何处理这个问题上。如果计数可以除以3，我假设它需要创建一个新行

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

应使用模数： 它将两个数字相除后返回一个余数，因此您可以使用以下内容（在.each中）：

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

  • 0/2=0=添加一行
  • 1/2=.5=不添加行
  • 2/2=1=不添加行
希望这就是您的意思。

首先，不需要自己处理
count
变量，函数已经提供了一个（作为可选参数）

使用
模
运算符，可以将
索引
除以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>';

$（数据）。查找（'products'）。每个（函数（索引）{
itemName=$（this.find（'itemName'）.text（）；
itemDesc=$（this.find（'itemDesc'）.text（）；
itemID=$（this.find（'id'）.text（）；
如果（（索引%3）==0）项+=''；
项目+=‘第1列’；
如果（（索引%3）==2）项+=''；
});
如果（items.substr（-12）！=''）items+=''；
我认为这是一种更干净的方法：

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

//将每个产品映射到一个单元格。
变量单元格=$（数据）.find（'products'）.map（函数（）{
var itemName=$（this.find（'itemName'）.text（）；
var itemDesc=$（this.find（'itemDesc'）.text（）；
var itemID=$（this.find（'id'）.text（）；
返回$（''）.addClass（'span3'）.text（itemName+''+itemDesc+''+itemID）；
});
//将细胞收集成行。
var行=[]；

对于（var i=0，j=cells.length；i解决问题的最佳方法是使用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>




$（文档）.ready（函数（）{
风险值数据=[
{名称：“Astor”，产品：“Astor”，库存水平：“10”，价格：2.99}，
{名称：“水仙花”，产品：“水仙花”，库存量：“12”，价格：1.99}，
{名称：“玫瑰”，产品：“玫瑰”，库存水平：“2”，价格：4.99}，
{名称：“牡丹”，产品：“牡丹”，库存水平：“0”，价格：1.50}，
{名称：“报春花”，产品：“报春花”，库存水平：“1”，价格：3.12}，
{名称：“雪花莲”，产品：“雪花莲”，库存水平：“15”，价格：0.99}，
];
$（'#flowerTmpl'）.tmpl（数据）.appendTo（'#row1'）；
});
${name}：


Html:




var$products=$（数据）。查找（'products'）；
var num_of_rows=Math.ceil（$products.length/3）
//在此处创建行每一行都应有一个id=“row”+索引
$products.每个（功能（i，val）{
变量行索引=数学单元（i/3）
$（“#行”+行索引）。追加（“列”+i%3+”）
});



类似的东西应该可以在左栏中使用，不要！使用CSS代替

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

更进一步，当返回的项目不能被3整除时，您无需担心关闭行


在一个旁注中，如果你决定去CSS路由，考虑使用<代码> UL> 和<代码> 
  •  ，作为语义，你有一个列表。
    

    

    UpdateFiddle更新以演示
    li
    的使用和此方法的灵活性。
    您可以共享您的html并进行设置吗？这是对数据库的Ajax调用。只需循环遍历所有产品的XML。然后它只需将变量项附加到dom。您还可以跳过添加行fluid div，然后只需添加所有元素。将它们全部向左浮动，并调整大小使其能够容纳3行。然后CSS将处理布局，而不添加行div。当然，除非您真的需要为每行添加容器div。这在大多数情况下都有效，但我的表中有4条记录，这只打印了3行，没有添加我的第4项。有什么想法吗注意，表错误。这非常好用，非常感谢！@CarlHussey原始代码没有很好地处理最后一个闭包，以防元素数没有完全除以3。请使用最后一个命令。Jquery tmpl不是像两年前一样被弃用吗？我认为它是一个有用的工具！

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