从数组中生成具有随机类的 div答案

【问题标题】：Generating divs each with random class from the array从数组中生成具有随机类的 div
【发布时间】：2015-03-28 19:59:15
【问题描述】：

我无法弄清楚为什么以下功能没有达到应有的效果：

function example() {
    var $element;
    var rndClass;
    var classesArr = ['one', 'two', 'three'];
    var container = $('.container');

    for(i=0; i<10; i++) {
        rndClass = Math.floor(Math.random()*classesArr.length);
        $element = $('</div>', {'class': 'card '+classesArr[rndClass]+''});
        $(container).append($element);
    }

}

简而言之，我想生成 10 个 div，每个 div 都有一个卡片类 + 随机选择的 classesArr （数组）中的另一个类，并且在将每个这些 div 附加到容器 div 之后，到目前为止似乎没有发生任何事情。这是一个 jsFiddle https://jsfiddle.net/u5LLx8gq/4/

作为旁注，如果你们能提出一种更好的方法来获取这些随机分类，那就太好了，所以在 10 个 div 中使用的这些随机分类的数量应该或多或少相等。

【问题讨论】：

你的代码有错别字，
应该是
。

标签： javascript jquery html

【解决方案1】：

要获得或多或少的偶数类类型，同时仍然随机选择，您可以执行以下操作。

jQuery(function($) {
  var classes = ['card-1', 'card-2', 'card-3'],
      classes_cpy = classes.slice(),
      i = 10,
      ran;

  for (; i--;) {
    ran = (Math.random() * classes_cpy.length) | 0;
    $('body').append(
      $('<div>', {
        'text': i,
        // remove and return a random string from the array
        'class': 'card ' + classes_cpy.splice(ran, 1)[0]
      })
    );
    // reload the array with values when it is empty
    if (classes_cpy.length === 0) {
      classes_cpy = classes.slice();
    }
  }
});

.card-1 { background-color:green; }
.card-2 { background-color:red; }
.card-3 { background-color:pink; }
.card { border:1px solid white; }

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

for (; i--;) 位是什么？
倒计时到0。
@Ilja 我要回答你之前的问题，我已经发布了答案然后它被删除了。我仍然在另一个浏览器选项卡中打开了代码。
对不起，我正要发布我的代码，jsFidle在我身上崩溃了，所以我开始了新的。

【解决方案2】：

更新

试试

var primaryClass = "card";
var additionalClasses = ["one", "two", "three"];
var clones = $.map(Array(additionalClasses.length + 1), function() {
  return [$.extend([], additionalClasses)]
});
var i = 0;
var collection = Array(10);
var elems = $.map(collection, function(el, idx) {
  i = !!clones[i].length ? i : i + 1;
  return $("<div />", {
    "text": idx,
    "class": primaryClass
        + " "
        + primaryClass
        + "-" 
        + clones[i].splice(Math.floor(Math.random() * clones[i].length), 1)
  })[0]
});

console.log(elems);

$("body").append(elems);

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

【讨论】：

超级简洁，但它没有解决这部分问题：在 10 个 div 中使用的这些应该或多或少相等
不会说谎，我必须在 map 函数的顶部 console.log(JSON.stringify(clones)); 才能弄清楚它是如何工作的。这是一个非常酷的实现 +1。
@robbmj fwiw，clones，return [additionalClasses.slice()] 可以替代 return [$.extend([], additionalClasses)]

【解决方案3】：

我认为

$(function(){
    function example() {
     var $element = null;
     var rndClass = 0;
     var classesArr = ['one', 'two', 'three'];
     var $container = $('.container');
     var MAX_ELEMENTS = 10;

    for(;MAX_ELEMENTS--;) {
        rndClass = Math.floor(Math.random()*classesArr.length);
        $element = $('<div></div>', {
            'class': 'card '+ classesArr[rndClass],
            'text': MAX_ELEMENTS
        });
        $container.append($element);
    }

}

example();
});

【讨论】：