使用jquery为每个随机元素添加类

时间:2014-12-27 09:10:02

标签: javascript jquery random increment sequential

我有一系列元素,让我们说:

<div class="tile1"></div>
<div class="tile2"></div>
<div class="tile3"></div>
<div class="tile4"></div>

我如何使用Jquery添加新类&#34; color&#34;每个随机元素的增量在2到6之间变化,如下所示:

<div class="tile1"></div>
<div class="tile2 color"></div>
<div class="tile3"></div>
<div class="tile4"></div>
<div class="tile5 color"></div>
<div class="tile6"></div>
<div class="tile7 color"></div>
<div class="tile8"></div>
<div class="tile9"></div>
<div class="tile10"></div>
<div class="tile11"></div>
<div class="tile12 color"></div>

2 个答案:

答案 0 :(得分:0)

这会将您的随机颜色类添加到div和索引

  $( "div" ).addClass(function( index ) {
      return "tile" + index + (Math.floor(Math.random() * 10 + 1) == 2) ? '' : 'color';
  });

答案 1 :(得分:0)

您需要将JQuery与普通的javascript混合使用:

$("[class^=tile]").each(function(i,e){
    ranNum = Math.floor(Math.random() * (6 - 2 + 1)) + 2;
    if((i + 1) % ranNum == 0){
       $(e).addClass('color');
    }
});

这里我们循环遍历tile div,如果tile的剩余部分除以随机数为0,我们就会为它指定颜色类。

<强> JSFIDDLE