7

私はJavascriptに比較的慣れていないので、複数の<div>タグに含まれるコンテンツをすばやくシャッフルする方法があるかどうか疑問に思っていました. 例えば

<div id='d1'>
  <span>alpha</span>
  <img src='alpha.jpg'>
</div>
<div id='d2'>
  <span>beta</span>
  <img src='beta.jpg'>
</div>
<div id='d3'>
  <span>gamma</span>
  <img src='gamma.jpg'>
</div>

<button onclick='shuffle_content();'>Shuffle</button>

ボタンをクリックした後、d1、d2、d3 のコンテンツの場所を変更したいと思います (たとえば、d3 が最初で、次に d1、次に d2)。

物事を移動する簡単な方法は、最初の div 要素 (d1) をコピーし、最後 (d3 の後) に配置してから、元の d1 を削除することです。しかし、それは実際に物事をランダム化するわけではありません。それは物事をサイクルに乗せるだけです（これは問題ないかもしれません）。

任意の提案をいただければ幸いです。ありがとう。

4

8 に答える 8

21

jQueryのような JavaScript ライブラリを使用しても問題ありませんか? これは、目的を達成するための簡単な jQuery の例です。HTML への唯一の変更は、提案されているようにコンテナー要素を追加することです。

<div id="shuffle">
    <div id='d1'>...</div>
    <div id='d2'>...</div>
    <div id='d3'>...</div>
</div>

およびJavaScript：

function shuffle(e) {               // pass the divs to the function
    var replace = $('<div>');
    var size = e.size();

    while (size >= 1) {
       var rand = Math.floor(Math.random() * size);
       var temp = e.get(rand);      // grab a random div from our set
       replace.append(temp);        // add the selected div to our new set
       e = e.not(temp); // remove our selected div from the main set
       size--;
    }
    $('#shuffle').html(replace.html() );     // update our container div with the
                                             // new, randomized divs
}

shuffle( $('#shuffle div') );
于 2008-11-24T20:29:58.823 に答える
19

最近の質問はこれの複製としてクローズされましたが、ここでのどの回答よりも良い回答を得たと感じています. この方法は非常に直接的です。HTML をコピーする手間がかからないため、DOM、スタイル、イベント ハンドラーなどへの変更が保持されます。

ある親要素のすべての子をシャッフルするには、ランダムな子を選択し、すべての子が再追加されるまで一度に 1 つずつ親に追加します。

jQuery の使用:

var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}

デモ: http://jsfiddle.net/C6LPY/2

jQuery を使用しない場合も同様で、単純です。

var parent = document.getElementById("shuffle");
var divs = parent.children;
var frag = document.createDocumentFragment();
while (divs.length) {
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}
parent.appendChild(frag);

デモ: http://jsfiddle.net/C6LPY/5/


編集： コードの内訳は次のとおりです。

// Create a document fragment to hold the shuffled elements
var frag = document.createDocumentFragment();

// Loop until every element is moved out of the parent and into the document fragment
while (divs.length) {

    // select one random child element and move it into the document fragment
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]);
}

// appending the document fragment appends all the elements, in the shuffled order
parent.appendChild(frag);
于 2012-03-09T21:58:33.137 に答える
2

各divのコンテンツを取得できます

c1 = document.getElementById('div1').innerHTML
c2 = document.getElementById('div2').innerHTML
c3 = document.getElementById('div3').innerHTML

次に、それらの新しい順序をランダムに決定します..そして、各コンテンツを新しい宛先に配置します

たとえば、ランダム性が次のように与えたとします。

c1_div = 'div2'
c2_div = 'div1'
c3_div = 'div3'

次に、あなただけ：

document.getElementById(c1_div).innerHTML = c1
document.getElementById(c2_div).innerHTML = c2
document.getElementById(c3_div).innerHTML = c3
于 2008-11-24T20:35:15.303 に答える
0

HTMLの場合、質問に対する簡単な答えは次のとおりです。

function shuffle_content() {
 var divA = new Array(3);
 for(var i=0; i < 3; i++) {
  divA[i] = document.getElementById('d'+(i+1));
  document.body.removeChild(divA[i]);
 }
 while (divA.length > 0)
  document.body.appendChild(divA.splice(Math.floor(Math.random() * divA.length),1)[0]);
}

そこにたどり着くために、私は次のように書きました。

<html>
<div id="cards">
<div id="card0">Card0</div><div id="card1">Card1</div>
<div id="card2">Card2</div><div id="card3">Card3</div>
<div id="card4">Card4</div><div id="card5">Card5</div>
<div id="card6">Card6</div><div id="card7">Card7</div>
<div id="card8">Card8</div><div id="card9">Card9</div>
</div>
<button id="shuffle">Shuffle</button>
<script language="javascript">
<!--
document.getElementById('shuffle').onclick = function () {
var divCards = document.getElementById('cards');
var divCardsArray = new Array(
    document.getElementById('card0'),
    document.getElementById('card1'),
    document.getElementById('card2'),
    document.getElementById('card3'),
    document.getElementById('card4'),
    document.getElementById('card5'),
    document.getElementById('card6'),
    document.getElementById('card7'),
    document.getElementById('card8'),
    document.getElementById('card9')
    );
return function() {
    var mDivCardsArray=divCardsArray.slice();
    while (divCards.childNodes.length > 0) {
        divCards.removeChild(divCards.firstChild);
    }
    while (mDivCardsArray.length > 0) {
        var i = Math.floor(Math.random() * mDivCardsArray.length);
        divCards.appendChild(mDivCardsArray[i]);
        mDivCardsArray.splice(i,1);
    }
    return false;
}
}()
//-->
</script>
</html>

私はその最後のwhileステートメントを次のようにまとめようとしていました：

    while (mDivCardsArray.length > 0) {
        divCards.appendChild(
            mDivCardsArray.splice(
                Math.floor(Math.random() * mDivCardsArray.length)
                ,1)[0]
        );
    }

しかし、これは読むのがかなり難しく、エラーが発生しやすくなります。

jQueryまたはPrototypeを使用すると、同じ基本構造に従って、探している結果を得ることができます。

cards個人的には、スタックにさらに2つのdivを追加し、を展開し、次のスタイルブロックを挿入して、定義divCardsArrayの直後にこのコードを追加すると、さらに見栄えが良くなると思います。divCardsArray

<html>
...
<style>
html,body{height:100%;width:100%;text-align:center;font-family:sans-serif;}
#cards,#cards div{padding:5px;margin:5px auto 5px auto;width:100px;}
</style>
...
<div id="cardA">CardA</div><div id="cardB">CardB</div>
...
var colorCardsArray = new Array(
    '#f00', '#f80', '#ff0', '#8f0', '#0f0', '#0f8',
    '#0ff', '#08f', '#00f', '#80f', '#f0f', '#f08' );
for(var i=0;i<divCardsArray.length;i++)
    divCardsArray[i].style.backgroundColor=colorCardsArray[i];
...
</html>
于 2008-11-24T21:17:23.783 に答える
0

外側の div で div をラップし、その ID を shuffle_content() に渡します。

そこで、新しい div を作成し、ラッパー div のノードをランダムな順序で複製して塗りつぶし、ラッパー div を新しい div に置き換えることができます。

于 2008-11-24T19:39:31.530 に答える
0

これを実現するには、サーバー側のコードを使用します。これは実際にはあなたの質問に対する答えではないことはわかっていますが、代替の実装です。

よろしく、
フランク

于 2008-11-24T20:29:48.917 に答える
-1

実際の Div 自体ではなく、コンテンツをランダム化することをお勧めします。これは、コンテンツを別の html ページに配置することで実現できます。ヘッダー情報や本文はなく、コンテンツだけです。

次に、ページの読み込み時に関数を使用して、どの div がどのコンテンツを取得するかをランダムに割り当て、これを使用して DIV のコンテンツを変更します。

<script type="text/javascript">
    function ajaxManager(){
        var args = ajaxManager.arguments;

        if (document.getElementById) {
            var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
        }
        if (x){         
            switch (args[0]){
                case "load_page":
                    if (x)
                    {
                        x.onreadystatechange = function()
                        {
                            if (x.readyState == 4 && x.status == 200){
                                el = document.getElementById(args[2]);
                                el.innerHTML = x.responseText;
                            }
                        }
                        x.open("GET", args[1], true);
                        x.send(null);
                    }
                    break;

                case "random_content":
                    ajaxManager('load_page', args[1], args[2]); /* args[1] is the content page, args[2] is the id of the div you want to populate with it. */       
                    break;
            } //END SWITCH
        } //END if(x)
    } //END AjaxManager

</script>
于 2008-11-24T20:05:26.937 に答える