为同一个类的divs随机添加的类

我有几个同一类的div。 我想随机地为每个div添加一个（不同的）类，但是没有在彼此之后重复添加类。

这是我的示例html：

 some text here 
 
 some other text here 
 
 some more text here 
 
 some more text here 
 
 some more text here  

应该添加的示例css：

 .addedclass1 {...} .addedclass2 {...} .addedclass2 {...} .addedclass3 {...} .addedclass4 {...} 

我最终会喜欢看到的：

 
 some text here 
 
 some other text here 
 
 some more text here 
 
 some more text here 
 
 some more text here  

我有一些随机化添加的类的jquery，但它允许重复：

 $(document).ready(function() { var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4']; $('.sometext').each(function(i) { $(this).addClass( classes[Math.floor(Math.random()*classes.length)]); }); }); 

我会慷慨解囊 – 我是一个血腥的初学者:)

Answer 1

每次包含除了以前使用的类之外​​的所有类的元素，我都会创建一个临时数组。 然后从中选择一个随机的。

JS小提琴： http ： //jsfiddle.net/9AbRQ/

 var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4']; var prevClass = ""; $('.sometext').each(function() { var classes2 = []; for (var i = 0; i < classes.length; i++) { if (classes[i] !== prevClass) { classes2.push(classes[i]); } } $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]); }); 

Answer 2

我会在你使用它后从数组中删除它，所以它不能再次使用，随机数会更小。 如果您需要其他内容的数组，只需创建一个副本来执行此操作。

Answer 3

这将获得一个随机索引，直到它与上一个使用的索引不同。

 $(document).ready(function() { var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'], lastIndex = -1; $('.sometext').each(function(i) { var index; do { index = Math.floor(Math.random() / (classes.length- 1) * 10); } while(index === lastIndex); lastIndex = index; $(this).addClass(classes[index]); }); }); 

Answer 4

这将有助于您确保拍摄但有效：

 $(function(){ $(".sometext").each(function(){ $(this).addClass("addedclass" + (Math.round(Math.random()*100 % $(".sometext").length) + 1)); }); }); 

jsfiddle： http ： //jsfiddle.net/ashishanexpert/565ZC/1/

或者，如果要从Array中随机添加类，可以这样做：

 $(function(){ var classList = ["addedclass1", "addedclass2", "addedclass3", "addedclass4"]; $(".sometext").each(function(){ $(this).addClass(classList[Math.round(Math.random()*100 % (classList.length - 1))]); }); }); 

jsfiddle： http ： //jsfiddle.net/ashishanexpert/565ZC/4/