每隔 n 次 Javascript,创建新行

Posted

技术标签:

【中文标题】每隔 n 次 Javascript,创建新行【英文标题】:Javascript every nth, create new row 【发布时间】:2013-09-21 09:52:50 【问题描述】:

我有一个产品页面,我想在每行中显示 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 整除,我认为它需要创建一个新行。

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

【问题讨论】:

你能分享你的html并设置fiddle吗? 这是对数据库的 Ajax 调用。只需遍历所有产品的 XML。然后它会将变量项附加到 dom。 您也可以跳过添加行流体 div,而只需添加所有元素。将它们全部向左浮动,并调整其大小,使 3 个可以排成一排。然后 CSS 将处理布局,而不添加行 div。当然,除非你真的需要一个容器 div,每一行。 【参考方案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>';

【讨论】:

这在大多数情况下都有效,但是我的表中有 4 条记录,这只打印了 3 行,没有添加我的第 4 项。有什么想法吗? 没关系,表格错误。这工作完美,非常感谢! @CarlHussey 原始代码不能很好地处理最后的关闭,以防元素的数量不能完全除以 3。请使用最后一个命令。【参考方案2】:

向左走,不要!改用 CSS。

样式化你的 span3 类,使其具有 30 % 的 with 并显示内联块。这样,当您决定每行显示 2、4 或 60 个时,您只需更改 CSS。这也使您可以使用针对不同视口的 CSS 媒体查询来更改每行的项目数,例如移动。

此外,当您返回的项目不能被 3 整除时,您无需担心关闭该行

附带说明,如果您决定采用 CSS 路线,请考虑改用 &lt;ul&gt;&lt;li&gt;,因为从语义上讲,您有一个列表。

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

更新 Fiddle 更新以展示 li 的使用以及这种方法的灵活性。

【讨论】:

【参考方案3】:

你应该使用模数: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 = 不添加行

希望这就是你的意思。

【讨论】:

【参考方案4】:

这是我认为更简洁的方法:

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

【讨论】:

【参考方案5】:

解决问题的最佳方法是使用 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>

HTML:

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

【讨论】:

Jquery tmpl 不是像 2 年前那样被弃用吗? 我认为这是一个有用的工具!【参考方案6】:
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>")
);

类似的东西应该可以工作

【讨论】:

以上是关于每隔 n 次 Javascript,创建新行的主要内容,如果未能解决你的问题,请参考以下文章

Javascript 新行 - document.write 结束

为啥 javascript 不使用 \n 打印新行?

JavaScript定时器案例:显示年月日时分秒+每隔60s发送一次短信

没有写入时,为啥 Elasticsearch 每隔“n”秒执行一次索引?

JS实现定时任务,每隔N秒请求后台——setInterval定时和ajax请求

每隔n次添加页眉和页脚(php循环)