如何根據給出的字母數量創建特定數量的div？

Question

function everything() { 
     var words = ["dog", "coat", "cough", "coffee"] 
     var rand = words[Math.floor(Math.random() * words.length)]; 
     var single = rand.split(""); 
     var box = $("<div>" + single + "</div>"); 
     $("body").append(box);   
    } 

我想知道如何創建的基礎上選擇的隨機字字母量單獨申報單的數量。

如何，我可以把所選單詞的每個字母在它自己單獨的DIV框？

Answer 1

最簡單的方法是拆分，然後再加入：

var single = '<div>' + rand.split('').join('</div><div>') + '</div>'; 

Answer 2

您將需要一個for-loop遍歷字符。

試試這個：

function everything() { 
 
    var words = ["dog", "coat", "cough", "coffee"] 
 
    var rand = words[Math.floor(Math.random() * words.length)]; 
 
    var single = rand.split(""); 
 
    for (var i = 0; i < single.length; i++) { 
 
    var box = $("<div>" + single[i] + "</div>"); 
 
    $("body").append(box); 
 
    } 
 
} 
 
everything();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

或者使用.html()

function everything() { 
 
    var words = ["dog", "coat", "cough", "coffee"] 
 
    var rand = words[Math.floor(Math.random() * words.length)]; 
 
    var single = rand.split(""); 
 
    var html = ''; 
 
    for (var i = 0; i < single.length; i++) { 
 
    html += "<div>" + single[i] + "</div>"; 
 
    } 
 
    $("body").html(html); 
 
} 
 
everything();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 3

試試這個：

function everything() { 
    var words = ["dog", "coat", "cough", "coffee"] 
    var rand = words[Math.floor(Math.random() * words.length)]; 
    for (var i = 0; i < rand.length; i++) { 
    var box = "<div>" + rand.substring(i,i+1) + "</div>"; 
    $("body").append(box); 
    } 
} 
everything(); 

你必須包括jQuery的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

Answer 4

rand.split('')之後，可以使用強大的數組方法。

您可以使用Array.prototype.map()

function everything() { 
    var words = ["dog", "coat", "cough", "coffee"]; 
    var rand = words[Math.floor(Math.random() * words.length)]; 
    $("body").append(rand.split('').map(function(letter) { 
     return $("<div>" + letter + "</div>"); 
    }).join('')); 
} 

或者Array.prototype.reduce()

function everything() { 
    var words = ["dog", "coat", "cough", "coffee"]; 
    var rand = words[Math.floor(Math.random() * words.length)]; 
    $("body").append(rand.split('').reduce(function(str, letter) { 
     return str + "<div>" + letter + "</div>"; 
    }, '')); 
} 

這就是說，無論是矯枉過正，在這種情況下。鑑於letter除了包裝以外沒有變化，@ Andy的解決方案更可取。