将数组中的随机类添加到每个指定的元素，不包括上次使用的类

时间：2017-09-18 18:24:59

标签： javascript jquery random

我有一个包含类的数组，我希望将此数组中的随机类应用于指定的元素 - 这很简单。但我需要避免连续两个或多个元素具有相同类的情况。

现在我有这样的事情：

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

6 个答案:

答案 0 :(得分：4)

关键是将最后一个随机值保存在变量中，然后将其从数组中删除。在接下来的迭代中，类不在数组中，因此不可能两次使用同一个类。但重要的是在选择新的随机类之后推送最后使用的类。

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"], last_class;

    $(".img-cap").each(function(){
    	var rdm_int = ~~(Math.random()*classes.length);
        var rdm_class = classes.splice( rdm_int, 1 )[0];
        if( last_class ) classes.push( last_class )
        $(this).addClass( rdm_class );
        last_class = rdm_class;
    });
});
.img-cap{
  width : 100px;
  height : 100px
}

.bg1{background:red}
.bg2{background:blue}
.bg3{background:yellow}
.bg4{background:orange}
.bg5{background:purple}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>
<div class="img-cap"></div>

答案 1 :(得分：0)

可能与您想要的有点不同，但这将持续到列表中没有其他类，每次随机选择一个并分配它。香草JS解决方案也是如此。

//Running as many times as there are items in classes
for (i=0; i<classes.length; i++) {
    var randomPick = Math.floor(Math.random()*classes.length)+1];

    //Change this to target whatever you are adding the classes to
    document.getElementsByClassName("img-cap").classList.add(classes[randomPick]);

    //Will edit the class list, removing it so it may not be picked again
    classes.splice(randomPick,1);
}

答案 2 :(得分：0)

您可以先缓存随机数，然后使用hasClass()方法确定是否应用它。

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var class_to_add = ~~(Math.random()*classes.length);
        console.log(class_to_add);
        if($(this).hasClass(classes[class_to_add]) === false) {
            $(this).addClass(classes[class_to_add]);
        }
    });
});

在此完全披露，我不知道~~(Math.random()*classes.length在此帖之前会产生什么，所以谢谢。

答案 3 :(得分：0)

克隆classes数组，然后使用克隆设置类并从克隆中删除所有类，直到没有任何内容为止。然后再次克隆。

＆＃13;
＆＃13; 
var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
var classesClone = classes.slice(0); // clone classes

$('.img-cap').each(function(){
    if(0 == classesClone.length) {
        // lets clone again if classesClone is empty
        classesClone = classes.slice(0);
    }

    var randomNumber = Math.floor(Math.random() * classesClone.length);
    
    $(this).addClass(classesClone[randomNumber]);
    classesClone.splice(randomNumber, 1); // remove item from clone which has just been used
});
＆＃13; 
.row {
   border:solid 1px black;
   float: left;
}
.img-cap {
  width: 30px;
  height: 30px;
  margin: 10px;
}

.bg1 {
  background-color: orange;
}

.bg2 {
  background-color: green;
}

.bg3 {
  background-color: red;
}

.bg4 {
  background-color: navy;
}

.bg5 {
  background-color: lime;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
  <div class="img-cap"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

你可以这样做。 它将随机使用所使用的类，一旦使用它将从您的classes array中删除该条目。

$(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];

    $(".img-cap").each(function(){
        var cssClass = classes[~~(Math.random()*classes.length)],
            index = classes.indexOf(cssClass)

        classes.splice(index, 1);

        $(this).addClass(cssClass);

    });
});

答案 5 :(得分：0)

简单地说：

    $(document).ready(function(){
    var classes = ["bg1", "bg2", "bg3", "bg4", "bg5"];
    var temp ='a';
    var x = 'a';
    $(".img-cap").each(function(){
        while(x===temp)
            x = classes[~~(Math.random()*classes.length)]
        temp = x
    //console.log(x)
    $(this).addClass(x);
    });
});

在foreach循环的每次迭代中，while循环不断选择一个随机类，直到所选的类变得与前一次迭代中选择的类不同，从而保证没有两个连续的元素获得相同的类。

Karl-AndréGagnon的asnwer更加彻底（确保更快）。但是如果你只有几个类可供选择，那么上面的while循环在产生新值之前不应该花很长时间。如果有很多课程，那么卡尔的解决方案可能是更好的选择。

相关问题
最新问题