Wie wählt man Bilder zufällig aus und geht in eine andere leere Liste?

Question

Ich habe eine ungeordnete Liste von Bildern mit verschiedenen Farben und ich möchte es nach dem Zufallsprinzip wählen Sie eine 2 Bilder und geht auf eine andere Liste, ich kenne die AppendTo und Math.Random wird den Trick tun, aber ich weiß nicht, wie Sie es implementieren können Hilf mir?

Hier ist die Geige und Code

 <div class="row"> 
      <div class="col-md-6"> 
      <ul class="imageList"> 
       <li><img class="swapimage" src="https://dummyimage.com/200x200/000/fff" alt=""></li> 
       <li><img class="swapimage" src="https://dummyimage.com/200x200/ffaa00/fff" alt=""></li> 
       <li><img class="swapimage" src="https://dummyimage.com/200x200/ff00d5/fff" alt=""></li> 
       <li><img class="swapimage" src="https://dummyimage.com/200x200/30c7db/fff" alt=""></li> 
      </ul> 
      </div> 

      <div class="col-md-6"> 
      <ul class="randomList"> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       </ul> 
      </div> 
     </div> 
     <input class="main-button" type="button" value="swap" id="swapBtn" name="swapBtn"> 


$('#swapBtn').on('click', function(){ 
    $('.swapimage').prependTo('.randomList li'); 
}); 

https://jsfiddle.net/uw5cvz8z/

Answer 1

Ein wenig zu spät ... Das Neuling eine Weile gedauert. Hier ist, wie ich es tun würde:

len = $(".swapimage").length 
 

 
$('#swapBtn').on('click', function(){ 
 
\t number = Math.floor(Math.random() * len); 
 
    do { 
 
    \t number2 = Math.floor(Math.random() * len); 
 
    } while (number2 == number); 
 
    
 
    $('.randomList li').eq(number).replaceWith($('.swapimage').eq(number)) 
 
    $('.randomList li').eq(number2).replaceWith($('.swapimage').eq(number2)) 
 
});

.imageList { margin-bottom: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input class="main-button" type="button" value="swap" id="swapBtn" name="swapBtn"> 
 
    <div class="row"> 
 
       <div class="col-md-6"> 
 
       <ul class="imageList"> 
 
        <li><img class="swapimage" src="https://dummyimage.com/200x200/000/fff" alt=""></li> 
 
        <li><img class="swapimage" src="https://dummyimage.com/200x200/ffaa00/fff" alt=""></li> 
 
        <li><img class="swapimage" src="https://dummyimage.com/200x200/ff00d5/fff" alt=""></li> 
 
        <li><img class="swapimage" src="https://dummyimage.com/200x200/30c7db/fff" alt=""></li> 
 
       </ul> 
 
       </div> 
 
    
 
       <div class="col-md-6"> 
 
       <ul class="randomList"> 
 
        <li></li> 
 
        <li></li> 
 
        <li></li> 
 
        <li></li> 
 
        </ul> 
 
       </div> 
 
      </div>

JSfiddle