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

【问题标题】：Add random class from an array to every specified element, excluding last used class将数组中的随机类添加到每个指定元素，不包括最后使用的类
【发布时间】：2017-09-18 18:24:58
【问题描述】：

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

现在我有这样的东西：

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

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

【问题讨论】：

  • 包含.img-caps 的行是什么样子的？
  • 简单地将最后选择的随机值保存在某个 var 中并对其进行检查以避免重复有什么问题？
  • 类数组中的所有条目都必须使用吗？还是只要不重复就可以了？
  • @jrook 我认为没有错，但该怎么做？
  • @entiendoNull 至少有 20 个元素，只有 5 个类，所以每个类都需要使用。最终他们可以一个一个去，但我更喜欢随机。

标签： javascript jquery random


【解决方案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>

【讨论】：

    【解决方案2】：

    可能与您想要的有点不同，但这会一直运行到列表中没有更多类为止，每次都会随机选择一个并分配它。 Vanilla 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);
}

    【讨论】：

      【解决方案3】：

      可以先缓存随机数，然后使用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 会产生什么，所以谢谢。

      【讨论】：

      • 这并没有回答这个问题，它询问的是如何防止同一个类被添加到连续的两个元素中，而不是如何防止同一个类被添加到一个元素中两次。
      【解决方案4】：

      你可以这样做。 它会随机使用正在使用的类，一旦使用它就会从您的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】：

        简单地说：

            $(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 的回答肯定更彻底（也更快）。但是，如果您只有几个类可供选择，那么上面的 while 循环应该很快就会产生一个新值。如果有很多类，那么 Karl 的解决方案可能是更好的选择。

        【讨论】：

          【解决方案6】：

          克隆类数组，然后使用克隆设置类并从克隆中删除所有类，直到没有任何剩余。然后再次克隆。

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

          【讨论】：

            猜你喜欢
            • 2011-12-02
            • 1970-01-01
            • 1970-01-01
            • 2012-08-02
            • 1970-01-01
            • 2016-02-17
            • 2020-12-13
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode