仅向生成的 <li> 随机添加一次类答案

【问题标题】：Randomly adding classes to a generated <li> only once仅向生成的 <li> 随机添加一次类
【发布时间】：2012-11-22 11:01:43
【问题描述】：

我在 <div> 中添加了一些 <li> 和 jQuery，如下所示：

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    $('#head #lol').append("<li id='losange"+ i++ +"' class='losange'></li>");
};

在 html 中看起来像这样：

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange'></li>
        <li id='losange2' class='losange'></li>
        <li id='losange3' class='losange'></li>
        <li id='losange4' class='losange'></li>
        <li id='losange5' class='losange'></li>
        <li id='losange6' class='losange'></li>
        ...
    </article>
</section>

现在我正在尝试在 jQuery 中为每个 <li> 添加随机类：

countBlocs = 60;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white');
};

这很好，但我需要添加超过 1 个类，但每个 <li> 只保留 1 个类

所以我用不同的类名复制了上面的代码（这不是很好）：

countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_white'); 
};
countBlocs = 30;
for (i = 1; i <= countBlocs; i++)
{
    var paras = $('#head #head_content li');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('logo_red'); <- Another class name
};

...

现在我生成的<li> 看起来像这样：

<section id='head'>
    <article id='head_content'>
        <li id='losange1' class='losange logo_red'></li>  <- Ok!
        <li id='losange2' class='losange logo_red'></li> <- Ok!
        <li id='losange3' class='losange logo white logo red'></li> <- WRONG!
        <li id='losange4' class='losange logo white'></li> <- Ok!
        <li id='losange5' class='losange logo red logo white'></li> <- WRONG!
        <li id='losange6' class='losange logo red'></li> <- Ok!
        ...
    </article>
</section>

问题：

它在同一个<li> 上添加了多个类，我只希望从已经定义的几个类中随机添加一个类到我的<li>

【问题讨论】：

标签： jquery random html-lists duplicates addclass

【解决方案1】：

遍历项目一次，然后为每个项目添加一个随机类：

var colors = ["logo_red", "logo_white"];

for (i = 1; i <= countBlocs; i++)
{
    var liItem = $('#losange' + i);
    var rand = Math.floor(Math.random() * colors.length);
    liItem.addClass(colors[rand]);
};

【讨论】：

我什至没有想过将这些类放在一个数组中，真丢脸:(
无需羞耻！在你自己的代码中发现东西从来都不是一件容易的事。看到它的唯一方法是将它放一段时间或让其他人看它。结果：StackOverflow！

【解决方案2】：

将你所有的类放在一个数组中，然后在数组上使用你的随机数来获取你的类并将它添加到你的 li 中。

var classes = ['white', 'red', 'logo_white'];
$('#head #head_content li').each(function() {
  var random = Math.floor(Math.random() * classes.length);
  $(this).addClass(classes[random]);
}

【讨论】：

这将对页面上的任何 li 项目执行此操作。考虑像在提问者的代码中那样添加父要求。
非常感谢您的回答，但我会保留 René Wolferink 的回答，因为我需要控制 countBlocs var，而 foreach 不符合我的需求

【解决方案3】：

你想做这样的事情：

 $('#head #head_content li').each(function(n) {
        $(this).addClass(myrandomFunction());
  });

并拆分出一个单独的“myrandomFunction”，它将返回随机类，每次调用一次。

【讨论】：