创建一行 li，给最后一个类命名为“last”并将它们全部放在 ul 中

Question

如何创建具有特定规格的 li 列表（通过使用 css 和向左浮动，它们看起来像简单的盒子）：

• 连续 7 个 li，
• 该行是一个闭合的 ul 标签，
• 最后应该有 8 行
• ul最后一个里（第7个）应该有class =“last”。

这就是我到目前为止所得到的，通过数组创建 li（我需要一个数组，因为我需要这些值）：

<script type="text/javascript">
    $(function () {
     $.each([39, 6, 1, 3, 5, 1, 1, 1, 1, 1, 1], function(index, value) { 
       $("#heatmap ul").append("<li class='box' value="+value+">"+index+"</li>"); 
     });
    });
</script>

我感谢您的帮助和时间， 妮可

Answer 1

我猜是这样的吗？

var values = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];

var $heatmap = $('#heatmap');

var currentRow = "";
for(var i = 0; i < values.length; i++) {
    currentRow += "<li>" + values[i] + "</li>";

    if(i % 7 == 0) {
        $heatmap.append("<ul>" + currentRow + "</ul>");
        currentRow = "";
    }
}

if(currentRow !== "") {
    $heatmap.append("<ul>" + currentRow + "</ul>");
}

$heatmap.find("ul li:last").addClass("last");

数组中每 7 个项目输出一个

，并将 last 类添加到生成的
• < 中的最后一个元素/代码>的

Answer 2

我会缓存您的选择器并使用 :nth-child(7n)选择器（每第 7 个子级），如下所示：

$(function () {
  var ul = $("#heatmap ul");
  $.each([39, 6, 1, 3, 5, 1, 1, 1, 1, 1, 1], function(index, value) { 
    ul.append("<li class='box' value="+value+">"+index+"</li>"); 
  });
  ul.children(":nth-child(7n)").addClass("last");
});

这可以防止它为函数中的每个循环找到

。

如果您浮动

元素，并给它们一个宽度，并且

为该宽度的 7 倍，它们将按 7 行浮动，如下所示：

li { float: left; width: 100px; }
ul { width: 700px }

最好展示浮动方法的演示： 这是我的意思的快速演示，这使用 1

而不是 n
元素，简单得多 :)

Answer 3

$("#heatmap ul li:last").addClass('last');

应该可以解决这个问题（因为 jQuery 可以解析 CSS3+ 选择器）