javascript - 将数组中的随机类添加到每个指定元素，不包括最后使用的类

Question

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

现在我有这样的东西:

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

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

Answer 1

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

$(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>