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数。

如何将所选单词的每个字母放在自己的单独div框中？

Answer 1

最简单的方法是拆分然后再次加入：

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

Answer 2

您需要for-loop来迭代字符。

试试这个：

＆＃13;

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();

＆＃13;

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

＆＃13;

或使用.html()

＆＃13;

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();

＆＃13;

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

＆＃13;

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的解决方案更可取。

如何根据给出的字母数创建特定数量的div？

4 个答案: