javascript Shuffle DIV ist innerhalb DIV

Question

i auf einer neuen Webseite und wir arbeite eine Reihe von DIV-Elemente in einem Dokument mit einer bestimmten Klasse Shuffle mischen wollen:

(function($){ 

$.fn.shuffle = function() { 

    var allElems = this.get(), 
     getRandom = function(max) { 
      return Math.floor(Math.random() * max); 
     }, 
     shuffled = $.map(allElems, function(){ 
      var random = getRandom(allElems.length), 
       randEl = $(allElems[random]).clone(true)[0]; 
      allElems.splice(random, 1); 
      return randEl; 
     }); 

    this.each(function(i){ 
     $(this).replaceWith($(shuffled[i])); 
    }); 

    return $(shuffled); 

}; 

})(jQuery); 

Meine DIV-Elemente wie folgt aussehen:

<div class="row animate-in shuffle" data-anim-type="fade-in-up"> 
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
       <div class="team-wrapper"> 
        <div class="team-inner" style="background-image: url('assets/img/team/1.jpg')"> 
         <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> --> 
        </div> 
        <div class="description"> 
         <h3> Test User 1</h3> 
         <h5><strong> Tester - Inhaber </strong></h5> 
         <p> 
          fon: 1234567890<br> 
          <a href="mailto:test@test.de">e-mail: test@test.de</a><br> 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 
       <div class="team-wrapper"> 
        <div class="team-inner" style="background-image: url('assets/img/team/2.jpg')"> 
         <!-- <a href="#" target="_blank" > <i class="fa fa-twitter" ></i></a> --> 
        </div> 
        <div class="description"> 
         <h3> Test User 2</h3> 
         <h5><strong> Tester </strong></h5> 
         <p> 
          fon: 0987654321<br> 
          <a href="mailto:tester2@test.de">e-mail: tester2@test.de</a><br> 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 

das ist, was ich als wenn die Seite geladen wird:

$('div#shuffle div').shuffle(); 

die Elemente sind noch in dem sa arraged so wie sie im Dokument geschrieben sind. Wo ist mein Fehler hier?

Vielen Dank im Voraus :)

Answer 1

Hier ist ein Beispiel zur Lösung des Problems. Lernen Sie daraus und implementieren Sie in Ihrer eigenen Situation.

FIDDLEJS

HTML:

<div id="container"> 
    <div class="shuffleMe"> DIV 1</div> 
    <div class="shuffleMe"> DIV 2</div> 
    <div class="shuffleMe"> DIV 3</div> 
    <div class="shuffleMe"> DIV 4</div> 
    <div class="shuffleMe"> DIV 5</div> 
    <div class="shuffleMe"> DIV 6</div> 
</div> 
<button onclick="shuffle()"> 
    SHUFFLE 
</button> 

JS:.

function shuffle() { 
    var container = document.getElementById("container"); 
    var elementsArray = collectionToArray(container.getElementsByClassName('shuffleMe')); 
    elementsArray.forEach(function(element){ 
    container.removeChild(element); 
    }) 
    shuffleArray(elementsArray); 
    elementsArray.forEach(function(element){ 
    container.appendChild(element); 
}) 
} 


// These two functions are something i recommend adding to your commonly used lib. The function above is what you need. 
function collectionToArray(collection) { 
    var i; 
    var arr = []; 
    for (i = 0; i < collection.length; i++) { 
    arr.push(collection[i]); 
    } 
    return arr.slice(); 
} 

function shuffleArray(array) { 
    for (var i = array.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = array[i]; 
     array[i] = array[j]; 
     array[j] = temp; 
    } 
    return array; 
} 

Answer 2

Sie einen Array mit allen Elementen machen und sie dann in einer separaten Funktion machen. An dieser Stelle müssen Sie nur das Array mit etwas, das wie folgt aussieht mischen:

function shuffle(a) { 
    for (let i = a.length; i; i--) { 
     let j = Math.floor(Math.random() * i); 
     [a[i - 1], a[j]] = [a[j], a[i - 1]]; 
    } 
} 

Und Rendern der Eltern Div.