1

UPDATE1：更新了 JS fiddle 链接抱歉设置间隔没有按我想要的那样工作

我有一个动态增长的数组（每 1 秒添加一次）。我必须拆分此列表并将其显示在列中，实际上我在显示 ul 和 li 中的列表时遇到问题（是的，只有 ul 和 li 没有表）。用户可以指定最大列数（一旦有这么多就停止添加列）和最小列高（没有添加的列可能包含少于这么多项目）。此外，任何添加的列中的项目数必须与前一列相同或少 1。最大列 =3 和最小列高 =3 的输出

在此处输入图像描述

到目前为止我能做的是：

  1. 使用设置间隔每 1 秒添加一次数字

  2. 将传入的数字放入数组中，例如[1] , [1,2] ... [1,2,3,4]4 秒后。这个数组称为范围

  3. 将主数组（范围）拆分为子数组（new_range），例如，如果主数组

    (范围) = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    new_range（第一个循环后）= [1, 2, 3, 4]

    new_range（第二次循环后）= [5, 6, 7]

    new_range（第三次循环后）= [8, 9, 10]

  4. 所以现在我需要使用 ul 和 li 垂直显示每个新范围，所以我尝试做类似$('ul').append('<li>' + new_range[j] + '</li>');j 是 new_range 数组索引的事情

我在显示 li 项目时遇到问题，就像使用 CSS 的示例输出一样，如果有人能告诉我如何在每次迭代后显示 li 项目，那就太好了

JS小提琴链接

4

1 回答 1

1

我发现你的小提琴太混乱了，所以我从头开始。

以下函数接受一个值数组 、data最大列数cols和每列的最大大小size。如果data有多个cols * size值，则不显示剩余部分。它将列创建为单独的 ul 元素，每个元素都附加到一个假定存在 id 为“container”的容器（该函数所做的第一件事就是清空该容器）。

function createList(data, cols, size){
    var $ul,
        $container = $("#container").empty();

    $.each(data, function(i,v){
        if (i >= cols * size)
            return false;
        if (i%size === 0)
            $ul = $("<ul/>").appendTo($container);

        $ul.append($("<li/>").html(v));
    });
}

ul 元素可以用这个 CSS 并排显示（即，作为列）：

ul { float : left; }

使用以下方法向数组添加值的工作演示：http setInterval(): //jsfiddle.net/VXAHy/1/

我没有setInterval()在我的答案中显示任何或数组填充代码，因为这都是无关紧要的：上面的函数总是根据传入的数组重绘所有列。（我确实在我的演示小提琴中显示了间隔的东西.)

于 2012-05-21T03:20:01.907 回答