シャッフル関数の出力をDOM要素の周りに移動するにはどうすればよいですか？

Question

だから私は、このHTML持っている：関数がカードを取る（これはカードのメモリゲームです）、それらをシャッフルし、それが周りを移動していないこと

const arrayOfCards = $('.card'); 

function shuffle(array) { 
var currentIndex = array.length, temporaryValue, randomIndex; 

while (currentIndex !== 0) { 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 
    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
} 
return array; 
} 
shuffle(arrayOfCards); 

：

<ul class="deck"> 
     <li class="card"> 
      <i class="fa fa-diamond"></i> 
     </li> 
     .....(16 total list items here) 
    </ul> 

そして、このJavaScriptをカード...私は何とかカードを動かす必要がある、私はそれを行う方法がわからない。私は、そのHTMLを持っている代わりに、jQueryから動的にカード（リスト項目）を作成するのでしょうか？私は本当にここで混乱している。

Answer 1

ソートされた配列をdomに追加する必要があります。あなたが現在行っているのは、配列をソートすることだけですが、ソートされた配列は自動的にDOMを変更しません。

これは非常にシンプルなアプローチです。

var $deck = $('.deck'), 
 
    $cards = $deck.children(); 
 

 
$('button').click(function() { 
 
    // sort the elements 
 
    $cards.sort(function() {return Math.random() - .5; }); 
 
    // update dom with new sort 
 
    $deck.append($cards); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="deck"> 
 
    <li class="card">1</li> 
 
    <li class="card">2</li> 
 
    <li class="card">3</li> 
 
    <li class="card">4</li> 
 
    <li class="card">5</li> 
 
    <li class="card">6</li> 
 
    <li class="card">7</li> 
 
    <li class="card">8</li> 
 
    <li class="card">9</li> 
 
    <li class="card">10</li> 
 
</ul> 
 

 
<button>Shuffle</button>

Answer 2

jQueryのソリューション：

// Add a shuffle() function to extend $() (jQuery) elements. 
$.fn.shuffle = function() { 
    // Fetch all elements in selection, 
    var allElems = this.get(), 
     getRandom = function(max) { //temporary function for in-house use 
      // return a random value below a max value 
      return Math.floor(Math.random() * max); 
     }, 
     //shuffle elements... 
     shuffled = $.map(allElems, function(){ 
      //loop through each element in selection (array) 

      // calculate a new random value, which is smaller than the selection size 
      var random = getRandom(allElems.length), 
      // clone random element in selection (array). this will be the new element at this current point in the array 
       randEl = $(allElems[random]).clone(true)[0]; 
      // remove random element from it's original point in the array 
      allElems.splice(random, 1); 
      // return this random element, to be positioned at this point in the array. $.map will do this work for us 
      return randEl; 
     }); 
    //now we loop through our selection and individually update its order to match our shuffled version 
    this.each(function(i){ 
     $(this).replaceWith($(shuffled[i])); 
    }); 
    // return references to our new shuffled selection 
    return $(shuffled); 

}; 

使用法：

var shuffled_selection = $('.deck .card').shuffle(); 
// select all .card elements under parent elements with class .deck 
// and then shuffle the dom (directly). shuffled_selection = final result 

出典：https://j11y.io/snippets/shuffling-the-dom/

A実施例：https://jsfiddle.net/qLyoxhkL/