Question

您好我有这个代码，它会在列表中添加一个随机类。如何避免在列表中再次重复类名？

$(document).ready(function() {
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"];

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

Answer 1

假设您拥有与li一样多的唯一类，则可以执行此操作。

function shuffle(obj) {
  var i = obj.length;
  var rnd, tmp;

  while (i) {
    rnd = Math.floor(Math.random() * i);
    i -= 1;
    tmp = obj[i];
    obj[i] = obj[rnd];
    obj[rnd] = tmp;
  }

  return obj;
}

var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"];

shuffle(classes);
$("#megamenu #nav li").each(function() {
  $(this).addClass(classes.pop());
});

.col-1 {
  background-color: red;
}

.col-2 {
  background-color: blue;
}

.col-3 {
  background-color: yellow;
}

.col-4 {
  background-color: green;
}

.col-5 {
  background-color: pink;
}

.col-6 {
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="megamenu">
  <ul id="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

首先我们使用Fisher-Yates shuffle对classes进行随机播放，然后我们从classes中删除一个条目并将其分配给li，这样就无法再次使用它。

Answer 2

尝试使用splice从数组中删除已使用的项目

$(document).ready(function () {
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"];

    $("#megamenu #nav li").each(function () {
        var idx = ~~ (Math.random() * classes.length);
        $(this).addClass(classes[idx]);
        classes.splice(idx, 1)
    });
});

演示：Fiddle

Answer 3

许多选择：

如果您不想再次使用同一个类，那么一旦您使用splice已经回答，请将其从数组中删除。
如果你想将类保留在数组中（可能稍后再使用它），你可以将使用过的类添加到第二个数组（让我们称之为黑名单），然后在使用类之前检查它们是否已经在{{1 }}。

选项2实施：

blacklist

3.使用类数组作为对象，并在使用该类后使用使用属性。

    $(document).ready(function () {
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"];
    var blacklist = [];
    $("#megamenu #nav li").each(function () {
        var index = ~~ (Math.random() * classes.length);
         var currClass = classes[index ];
      if(! $.inArray(currClass , blacklist ))  //or you can use the array index instead of class name.    
        $(this).addClass(currClass );
         blacklist.push(currClass );        
    });
});

Answer 4

由于您的应用程序中没有严重的依赖关系，您可以使用sort作为原始随机播放：

$(document).ready(function() {
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"];
    classes.sort(function(){ return Math.random() - .5 });

    $("#megamenu #nav li").each(function(){
        $(this).addClass(classes.pop());
    });
});

jsFiddle

将随机类添加到元素但不再重复

4 个答案: