javascript/jqueryを使用してランダムにシャッフルされた配列に基づいてdivを表示する

Question

本来、Javascript/Jqueryスクリプトを作成しようとしていますが、ランダムにシャッフルされた一連の数字。

私は数をシャッフルするためのスクリプトを手に入れていましたが、divsの作業を繰り返していましたが、2つを組み合わせる方法がわかりません。

スクリプトは、これまで誰もが正しい方向に私を指すことができれば、私はこの

<div id="random-divs"> 
    <div id="random0">Div 0</div> 
    <div id="random1">Div 1</div> 
    <div id="random2">Div 2</div> 
    <div id="random3">Div 3</div> 
    <div id="random4">Div 4</div> 
    <div id="random5">Div 5</div> 
</div> 

のように見えるHTMLで一巡にしようとしている。この

$(document).ready(function() { 

    function shuffle(arra1) { 
     var ctr = arra1.length, temp, index; 

     // While there are elements in the array 
     while (ctr > 0) { 
      // Pick a random index 
      index = Math.floor(Math.random() * ctr); 
      // Decrease ctr by 1 
      ctr--; 
      // And swap the last element with it 
      temp = arra1[ctr]; 
      arra1[ctr] = arra1[index]; 
      arra1[index] = temp; 
     } 

     return arra1; 
    } 

    var myArray = [0, 1, 2, 3, 4, 5]; 
    console.log(shuffle(myArray)); 

    var divs = $('div[id^="random"]').hide(), 
     i = 0; 

    (function cycle() { 
     divs.eq(i).fadeIn(400) 
        .delay(1000) 
        .fadeOut(400, cycle); 

     i = ++i % divs.length; 
    })(); 
}); 

のdivのように見えます私は大いに感謝しています。

Answer 1

最も簡単な変更は、シャッフルされた位置を考慮して、divs.eq(i)をdivs.eq(myArray[i])に置き換えることです。

var divs = $('div[id^="random"]').hide().toArray() 
    i = 0; 
shuffle(divs); 

(function cycle() { 
    $(divs[i]).fadeIn(400) 
       .delay(1000) 
       .fadeOut(400, cycle); 

    i = ++i % divs.length; 
})(); 

あなたもtoArrayと$(divs[i])を必要としない場合があります

しかし、代わりにインデックスを持つ配列をシャッフル、一般的に、あなただけの要素自体の配列をシャッフルするかどう理解することが容易になるだろうあなたのshuffle関数は、jQueryコレクションでも動作するのに十分な汎用性を持っています。

Answer 2

jQueryセレクタ「div [id^= "random]"を更新すると、idが "random-divs"のコンテナdivにも影響が出ます。

Answer 3

$(document).ready(function() { 
 

 
    function shuffle(arra1) { 
 
     var ctr = arra1.length, temp, index; 
 

 
     // While there are elements in the array 
 
     while (ctr > 0) { 
 
      // Pick a random index 
 
      index = Math.floor(Math.random() * ctr); 
 
      // Decrease ctr by 1 
 
      ctr--; 
 
      // And swap the last element with it 
 
      temp = arra1[ctr]; 
 
      arra1[ctr] = arra1[index]; 
 
      arra1[index] = temp; 
 
     } 
 

 
     return arra1; 
 
    } 
 

 
    var myArray = [0, 1, 2, 3, 4, 5]; 
 
    var shuffledArray = shuffle(myArray); 
 
    console.log(shuffledArray); 
 
    var divs = $('div[id^="random"]'); 
 
    
 
    (function cycle() { 
 
     var i = shuffledArray.shift(); 
 
     if(i === undefined){ 
 
      return 
 
     } 
 
     divs.eq(i).fadeIn(400) 
 
        .delay(1000) 
 
        .fadeOut(400, cycle); 
 

 
     
 
    })(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="random-divs"> 
 
    <div style='display:none;' id="random0">Div 0</div> 
 
    <div style='display:none;' id="random1">Div 1</div> 
 
    <div style='display:none;' id="random2">Div 2</div> 
 
    <div style='display:none;' id="random3">Div 3</div> 
 
    <div style='display:none;' id="random4">Div 4</div> 
 
    <div style='display:none;' id="random5">Div 5</div> 
 
</div>