javascript - div をランダムな順序で別の div に動的に追加する

Question

キーワードのリストをシャッフルして、テキストスライドショー内の個々の div に入れようとしています。

これが私のスクリプトです：

var keys = ["dancing.", "computers.", "food.", "movies.", "singing.", "hiking.", "math.", "music.", "reading.", "cars.", "laughing.", "animals.", "cupcakes.", "shopping.", "soccer.", "Europe.", "photography.", "volunteering.", "outerspace.", "traveling.", "guitar.", "painting.", "children.", "boats.", "science.", "art.", "cheerleading.", "Einstein.", "teaching.", "politics.", "waterskiing.", "volleyball.", "whittling.", "volleyball.", "running.", "comedy.", "theater.", "Africa."];

keys.sort(function() { return Math.floor(Math.random()*3 -1)});

for(i = 0; i < keys.length; i++) {
    ("<div>" + keys[i] + "</div>").appendTo("slideshow");   
}

function randomize(myArray) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

<td class="align-top">
   <div class="slideshow"></div>
</td>

何か案は？また、javascript と jQuery の組み合わせが悪いと思います。これをきれいにするのを手伝ってくれませんか？

score 2 · Accepted Answer

これを試して：

keys.sort(function() { return Math.random() - 0.5; });

var $slideshow = $(".slideshow");
for(var i = 0; i < keys.length; i++) {
    $slideshow.append("<div>" + keys[i] + "</div>");   
}

デモ： http： //jsfiddle.net/XpyYX/1/

次の行が原因で、コードが機能しませんでした。

("<div>" + keys[i] + "</div>").appendTo("slideshow");

を開く前に、$またはを省略しました。これは、クラスごとに要素を選択するために（を付けて）追加するためです。これは次のように機能します。jQuery(".slideshow".

$("<div>" + keys[i] + "</div>").appendTo(".slideshow");

...ただし、スライドショー要素への参照をキャッシュする方が効率的です。

また、ランダムソートは非常に複雑でした。

score 0 · Accepted Answer

これを試して：

while(keys.length > 0)
{
    var k = Math.floor(Math.random()*keys.length);
    $("<div>"+keys[k]+"</div>").appendTo('.slideshow');
    keys.slice(k, 1);
}

score 0 · Accepted Answer

あなたが使用することができます

var keys = ["dancing", "computers", "food", "movies", "singing", "hiking", "math", "music", "reading", "cars", "laughing", "animals", "cupcakes", "shopping", "soccer", "Europe", "photography", "volunteering", "outerspace", "traveling", "guitar", "painting", "children", "boats", "science", "art", "cheerleading", "Einstein", "teaching", "politics", "waterskiing", "volleyball", "whittling", "volleyball", "running", "comedy", "theater", "Africa"];

var el=document.getElementById('slideshow'),
    temp=document.createElement('div');
for(var i=0;i<keys.length;i++){
    var current=temp.cloneNode(false);
    current.appendChild(document.createTextNode(keys[i]+'.'));
    var position=Math.floor(Math.random()*(el.childNodes.length+1));
    if(position==el.childNodes.length){
        el.appendChild(current);
    }else{
        el.insertBefore(current,el.childNodes[position]);
    }
}

デモ: http://jsfiddle.net/UFdbm/

注:

要素の末尾にあるドットを削除して、後で追加できます
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/sortを参照してください。を使用する場合.sort(compareFunction)、compareFunction(a, b)特定の要素のペアが指定された場合、aおよびbその 2 つの引数として常に同じ値を返す必要があります。一貫性のない結果が返された場合、ソート順は未定義です。したがって、配列をソートするときにランダムな値を返す関数は使用できません。

編集：

jQuery を使用して少し単純化できます。

var keys = ["dancing", "computers", "food", "movies", "singing", "hiking", "math", "music", "reading", "cars", "laughing", "animals", "cupcakes", "shopping", "soccer", "Europe", "photography", "volunteering", "outerspace", "traveling", "guitar", "painting", "children", "boats", "science", "art", "cheerleading", "Einstein", "teaching", "politics", "waterskiing", "volleyball", "whittling", "volleyball", "running", "comedy", "theater", "Africa"];

var el=$('#slideshow');
for(var i=0;i<keys.length;i++){
    var current=$("<div>"+keys[i]+".</div>");
    var position=Math.floor(Math.random()*(el.children().length+1));
    if(position==el.children().length){
        el.append(current);
    }else{
        current.insertBefore(el.children().eq(position));
    }
}

デモ: http://jsfiddle.net/UFdbm/1/

score 0 · Accepted Answer

var keys = ["dancing.", "computers.", "food.", "movies.", "singing.", "hiking.", "math.", "music.", "reading.", "cars.", "laughing.", "animals.", "cupcakes.", "shopping.", "soccer.", "Europe.", "photography.", "volunteering.", "outerspace.", "traveling.", "guitar.", "painting.", "children.", "boats.", "science.", "art.", "cheerleading.", "Einstein.", "teaching.", "politics.", "waterskiing.", "volleyball.", "whittling.", "volleyball.", "running.", "comedy.", "theater.", "Africa."];

var insertionSort = function (arr) {
    var len = arr.length, i = -1, j, tmp;

    while (len--) {
        tmp = arr[++i];
        j = i;
        while (j-- && arr[j] > tmp) {
            arr[j + 1] = arr[j];
        }
        arr[j + 1] = tmp;
    }
};

insertionSort(keys);
alert(keys);
for(i = 0; i < keys.length; i++) {
    $("<div>"+keys[k]+"</div>").appendTo('.slideshow');

}

これを試してください

javascript - div をランダムな順序で別の div に動的に追加する

4 に答える 4

Related

Reference