每行显示n个（js）

来源：互联网发布：腾讯通rtx2009 mac 编辑：程序博客网时间：2024/06/18 11:20

在写产品展示js的时候，经常遇到每行显示n个的情况，html和css代码如下所示：

<div id="list">    <!--第一行显示4条-->    <ul>        <li>第一篇文章</li>        <li>第二篇文章</li>        <li>第三篇文章</li>        <li>第四篇文章</li>    </ul>    <div class="autoHeight"></div>    <div class="zs_line"></div>    <!--第二行显示4条-->    <ul>        <li>第一篇文章</li>        <li>第二篇文章</li>        <li>第三篇文章</li>        <li>第四篇文章</li>    </ul>    <div class="autoHeight"></div>    <div class="zs_line"></div>    <!--以此类推-->    <!--最后一行显示4条-->    <ul>        <li>第一篇文章</li>        <li>第二篇文章</li>        <li>第三篇文章</li>        <li>第四篇文章</li>    </ul>    <div class="autoHeight"></div></div>

那么js应该如何写，应该如何遍历获取到的产品数据data，才能应对这种产品展示呢？

for (var i = 0; i < data.length; i++) {            //处理循环的第一条(创建列表开始)            if (i % 4 == 0) {                html += '<ul>';                html += '<li>' + data.title + '</li>';                //循环的第一条有可能是最后一条，需要做处理                if (i == data.length - 1) {                    html += '</ul><div class="autoHeight"></div>';                }            }            //处理循环除第一条和最后一条的中间条数            var middle = i % 3;            if (middle > 0 && middle < 3) {                html += '<li>' + data.title + '</li>';                //循环的中间任何一条都有可能是最后一条，需要做处理                if (i == data.length - 1) {                    html += '</ul><div class="autoHeight"></div>';                }            }            //处理循环的最后一条(创建列表结束)            if (i % 4 == 3) {                html += '<li>' + data.title + '</li>';                //循环的最后一条有可能是最后一条，需要做处理                if (i == data.length - 1) {                    html += '</ul><div class="autoHeight"></div>';                } else {                    html += '</ul><div class="autoHeight"></div><div class="zs_line"></div>';                }            }

0 0