Question

我正在尝试将随机类添加到偶数＆lt; li>我的#container div中的元素

这是我的代码：

$( "#container li" ).each(  

  $().ready(function() {

        $("#container li:random").addClass("one");
        $("#container li:random").addClass("two");
        $("#container li:random").addClass("three");

    })
    );

问题是我有十个＆lt; li>我想让这些元素中的每一个以随机的方式接收三个可能的类中的一个。

但是我上面的代码只指定三个＆lt; li>具有类别的元素留下剩余的七个＆lt; li>无类别的元素。

我已经尝试了其他代码片段，但没有一个代码随机地将类列表应用于指定的所有元素。

我已经尝试过帖子HERE中的片段，但没有一个产生确保所有元素都获得随机类的预期结果。

感谢您的帮助。

Answer 1

您可以使用一个类数组，然后将该数组中的随机类分配给匹配选择器的每个元素，如下所示：

$(document).ready(function(){
    var classes = ["one", "two", "three"];

    $("#container li").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

如果要确保每个类只使用一次，则可以在使用它时将其从数组中删除：

$(document).ready(function(){
    var classes = ["one", "two", "three"];

    $("#container li").each(function(){
        $(this).addClass( classes.splice( ~~(Math.random()*classes.length), 1 )[0] );
    });
});

Answer 2

这样的事情可能有用：

$( function (){
    $( "#container li" ).each( function (){
        var rng = Math.round(Math.random()*4);
        var rndmClass = [ 'one', 'two', 'three', 'four', 'five' ];

        $(this).addClass( rndmClass[rng]);
    });
});

相应的HTML DOM可能如下所示：

ul#container
    li
    li
    li

实际上，我接受了onload语句并将.each函数隐藏在其中。其次，我在each（）语句中添加了一个function（）{}。该函数从0-4随机选取一个数字;每个数字对应于rndmClass数组中的一个类，并将该类添加到#container中的每个列表项。

Answer 3

我已经写了一个可能适合你的小jquery插件。看看这个： https://github.com/cjthedizzy/randomClassJS

将随机类应用于指定的每个元素

3 个答案: