Platzierter Text im zufälligen Block

Question

Ich habe eine Reihe von Werten. Und ich habe 4 Blöcke auf meiner HTML-Seite. und ich brauche, um etwas Wert in einem Block zu zeigen. Aber es muss zufällig sein.

$(document).ready(function() { 
 

 
    var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4']; 
 

 
    var blocks = $('.item_blocks'); 
 
    var blocksLength = blocks.length; 
 

 
    for (var i = 0; i < data.length; i++) { 
 
    var indexBlock = Math.floor(Math.random() * blocksLength); 
 
    blocks.eq(indexBlock).html(data[i]); 
 
    console.log(indexBlock, data[i]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div>

Answer 1

Wie pro Ihre aktuelle Implementierung gibt es keine Garantie, dass jeder Block mit Text bevölkert wird.

Eine einfachere Lösung besteht darin, das Array zu mischen und den Text für item_blocks sequenziell zu aktualisieren.

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; 
 
} 
 

 
$(document).ready(function() { 
 
    var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4']; 
 
    var arr = shuffleArray(data); 
 
    $('.item_blocks').text(function(index) { 
 
    return arr[index] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div> 
 
<div class="item_blocks"></div>

Gebrauchte @Laurens Holst's answer für shuffleArray()

Answer 2

Problem mit Ihrem Code ist die Tatsache, dass Sie den Block zufällig auswählen verwenden und nicht verwenden, um alle Blöcke garantiert. So können Sie entweder die Elemente entfernen, während Sie sie verwenden, oder die Elemente nach dem Zufallsprinzip sortieren.

$(document).ready(function() { 
 

 
    var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4']; 
 

 
    var blocks = $('.item_blocks').sort(function() { 
 
    return Math.random() > .5 ? -1 : 1; //just randomly swaps position in the collection 
 
    }).text(function(i){ //using a function in text is like using each() 
 
    return data[i]; 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
</ul>

oder einfach nur das Array sortieren randonly

$(document).ready(function() { 
 

 
    var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4']; 
 
    
 
    data.sort(function() { 
 
    return Math.random() > .5 ? -1 : 1; 
 
    }); 
 
    
 
    var blocks = $('.item_blocks').text(function(i){ 
 
    return data[i]; 
 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
    <li class="item_blocks"></li> 
 
</ul>