Question

我无法弄清楚为什么跟随功能无法达到应有的效果：

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都有一个card + classesArr（array）中的另一个类，它是随机选择的，并且在将每个div附加到容器div之后，到目前为止似乎没有发生任何事情。这是一个jsFiddle https://jsfiddle.net/u5LLx8gq/4/

作为一个旁注，如果你们可以建议一个更好的方法来获得这些随机分数，那将是很好的，因此在10个div中应该有或多或少相等的数量。

Answer 1

要获得或多或少的偶数课程类型，同时仍然随意选择，你可以做这样的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

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

从数组中生成带有随机类的div

3 个答案: