1

UPDATE1: JS フィドル リンクを更新しました。申し訳ありませんが、間隔の設定が機能していませんでした。

動的に成長する配列があります（1秒ごとに数が追加されます）。このリストを分割して列に表示する必要があります。実際には、ul と li 内にリストを表示する際に問題があります (yes only ul and li no tables)。ユーザーは、列の最大数 (この数になると列の追加を停止する) と最小の列の高さ (追加される列には、この数よりも少ない項目が含まれる可能性があります) を指定できます。また、追加された列の項目数は、前の列と同じか、1 つ少なくする必要があります。最大列 = 3 および最小列高 = 3 の出力

ここに画像の説明を入力

これまでにできたことは次のとおりです。

  1. set interval を使用して、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 (2 回目のループ後) = [5, 6, 7]

    new_range (3 回目のループ後) = [8, 9, 10]

  4. だから今、ulとliを使って新しい範囲をそれぞれ垂直に表示する必要があるので、$('ul').append('<li>' + new_range[j] + '</li>');jがnew_range配列インデックスであるようなことをしてみました

CSS を使用したサンプル出力のように、li アイテムを隣り合わせて表示する際に問題があります。反復ごとに 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; }

を使用して配列に値を追加する作業デモsetInterval(): http://jsfiddle.net/VXAHy/1/

setInterval()上記の関数は、渡された配列に基づいてすべての列を常に再描画します。 (私はデモフィドルで間隔のものを表示します.)

于 2012-05-21T03:20:01.907 に答える