Question

bellow是我的HTML代码。此内容框将取决于内容。我可能是5,10,20。因为它将是动态内容。现在我想每个div随机添加一个类，类名称将为color-1，color-2，color-3，color-4，color-5，..............颜色-10。所以数字范围是1-10。那么我怎么能在内容框中随机添加这些类。请问任何想法。

HTML：

<div class="content-box">
    <img src="images/love-01.jpg" />
</div>
<div class="content-box">
    <img src="images/love-05.jpg" />
</div>
<div class="content-box">
    <img src="images/love-02.jpg" />
</div>
<div class="content-box">
    <img src="images/love-03.jpg" />
</div>
<div class="content-box">
    <img src="images/love-04.jpg" />
</div>

http://jsfiddle.net/dKgaz/

Answer 1

$('div.content-box').addClass(function(){
    var color = Math.floor(Math.random() * 10) + 1;
    return 'color-' + (color < 10 ? '0' + color : color)
});

JS Fiddle demo

更新了演示，更加明显：demo。

Answer 2

我已经更新了你的JSFiddle。基本上你想要以下javascript：

$('.content-box').each(function() {
    var number = 1 + Math.floor(Math.random() * 10);
    $(this).addClass("color-" + number.toString());
});

Your JSFiddle demo updated

$('.content-box').each位选择带有content-box类的每个元素，然后使用括号中的任何内容遍历集合。在这种情况下，Math.random()会给出一个0到1之间的数字，我们将它乘以10并加1以获得1到10之间的随机数。Math.floor位确保没有小数位。最后我们取这个数字并将“color- [random number]”类添加到当前元素。

显然，可能有多个具有相同编号的框，因此如果您不想重复，则必须创建一个数组来存储以前的数组。

Answer 3

试试这个：

$('div.content-box').addClass(function(idx){
    return 'color-' + (idx % 10 + 1);
});

Answer 4

这个怎么样：

    function randomInt(min, max) {

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    $('.content-box').each(function() {

        $(this).addClass('color-' + randomInt(1, 10));
    });

随机所有，可能会生成相同的类，如果你想要类名唯一，搜索一些数组shuffle方法，shuffle [1，.. 10]数组，并重复addClass

如何在div类中添加随机数id

4 个答案: