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

JavaScriptコードとHTMLのリストをランダム化することを学びます。 リストは、(OL)または順不同(UL)を注文することができました。 この方法は、LI要素をシャッフルするrand関数を使用しています

A+ A-

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

私はrandomizeList()JavaScript関数を発見しました。

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

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

JavaScriptが美しいです!

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をご利用いただきありがとうございます。

Ads

シェア

最近

あなたがLinuxの恋人している場合を探すために、ベストUbuntuの代替

さんが何かに精通取得することから始めましょう。 基本的な、少しオフトラック! あなたは今までLinuxとUbuntuの...

Gmailの受信トレイに署名を追加する方法 - GmailでGoogleの署名を追加します。

Googleによる受信トレイには、Googleが過去数年間に発売された最高のものの一つでした。 これは、統一された受信...

週刊技術のニュース:ノキア、Googleと任天堂

みなさん、こんにちは、それは金曜日、3月3日だとちょうどいつものように私たちは毎週のニュースラウンドアップに戻っていま...

初心者のためのラズベリーパイプロジェクト - あなたはラズベリーパイで何ができますか

ラズベリーパイは、低消費電力、ラズベリーパイ財団が作成したシングルボードコンピュータのシリーズです。 もともと発展途上...

Androidの2017のためのベストVPN - Androidの中でVPNを使用する方法

ゴーンは、VPNはハイテクsavviesやハッカーのためだけであった時代です! そして、私たちはこれらのサービスについ...

コメント