HTMLのリストをランダム：ランダムにHTMLのリスト項目を表示

私は、Webページに表示したかったURLの長いリストを持っていました。 また、私はこれらのURLは、常にランダムな順番で来たいと思いました。 だから、私は、HTMLのリストを取得し、それのすべての項目をシャッフルする方法を必要としていました。 当初、私は途方に少しあったが、それは非常に簡単なものであることが判明しました！

私はrandomizeList（）JavaScript関数を発見しました。

次のJavaScriptコードは、HTMLのリストをランダム化することができます。 それは上で動作するためのスクリプトは、順序付きリスト（OL）と順不同リスト（UL）の両方を扱うことができるLI項目リストの両方のタイプに共通しています。

あなたがランダムにHTMLリスト内の項目を表示したい場合は、BODYタグのonLoadイベントが発生したときにすることができたびにページが読み込まはrandomizeList（）関数を呼び出します。 ユーザーに制御を与えたい場合や、例えばあなたがそのボタンのonClickイベントが発生したとき、あなたは同じ関数を呼び出すことができ、ボタンのクリックでリストをランダム化します。

JavaScriptが美しいです！

あなたはちょうどあなたがランダム化するリストのIDを渡す必要があります。 IDは以下のとおりrandomizeList（）関数の最初の行で定義する必要があります。

function randomizeItems(items)
{
    var cached = items.slice(0), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function randomizeList()
{
var list = document.getElementById("myItems");
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = randomizeItems(nodes);
    while(i < nodes.length)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
list.style.display="block";
}

あなたのHTMLリストのIDでrandomizeList（）関数でmyItemsを置き換えることを確認します。 このメソッドは、提供されたリストの下のすべてのノードのホールドを取得します。 これらのノードは、LI要素です。 そして、それは単にこれらのLI要素をシャッフルするには、JavaScriptのランド（）関数を使用し、ランダムに配置されたスタックを送り返さ。 この例からわかるように、ドキュメントオブジェクトモデル（DOM）を横断することができるということは、多くのウェブアプリケーションを開発することが不可欠です。 私はここcreateTreeWalker（）メソッドを使用していないが、それはですが、本当にDOMツリーをトラバースする簡単な方法 。

私はこの先端があなたのために有用であった願っています。 あなたは、このコード内の任意の問題に直面している場合は私に知らせてください。 TechWelkinをご利用いただきありがとうございます。