使用 jQuery 将随机选择的类添加到 HTML 标记

Posted 2023-02-25

【中文标题】使用 jQuery 将随机选择的类添加到 HTML 标记

【英文标题】：Adding Randomly chosen class to HTML tag using jQuery

【发布时间】：2010-12-27 01:54:28

【问题描述】：

我需要做的是在我的菜单中，我想在每次功能启动（页面加载）时添加一个完全随机顺序的类（如下所列）

这是我的 html

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Why Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

这就是我想要的结果，每次添加类的顺序都不同

<div id="menu">
    <ul>
        <li><a href="#" class="li-one" >Home</a></li>
        <li><a href="#" class="li-five">About Us</a></li>
        <li><a href="#" class="li-three">Portfolio</a></li>
        <li><a href="#" class="li-two">Why Us</a></li>
        <li><a href="#" class="li-four">Contact Us</a></li>
    </ul>
 </div>

下面我列出了所有的类。

.li-one .li-two .li-three .li-four .li-five

我花了一个小时试图弄清楚这一点，但没有结果

非常感谢您提前提供的帮助

【问题讨论】：

查看 javascript 的 Math.Random()。你到底卡在哪里了？你知道如何在 jQuery 中应用一个类（即使用选择器吗？）

他实际上并不想要真正随机的课程。他希望他们都筋疲力尽，看起来没有重复。

【参考方案1】：

 <script type="text/javascript">
 var style=new Array('li-one','li-two','li-three','li-four','li-five');
 var l=style.length;
 $(document).ready(function()
  var t=(new Date()).getSeconds()%l;

  if(t>l) while(t>l) t=(new Date()).getSeconds()%l; 

  var i=t;

  $("div#menu ul li a").each(function(a,b)
   if(i<l)
    $(b).addClass(style[i++]);
   else
    if(t>=0)
     $(b).addClass(style[--t]);
    
   
  );
 );
 </script>

【参考方案2】：

这将导致比普通随机函数更好的类名改组：

Array.prototype.shuffle = function ()
    var i = this.length, j, temp;
    if ( i == 0 ) return;
    while ( --i ) 
        j = Math.floor( Math.random() * ( i + 1 ) );
        temp = this[i];
        this[i] = this[j];
        this[j] = temp;
    
;
var classes = new Array('one', 'two', 'three', 'four', 'five');
classes.shuffle();

var menu = $('#menu ul li');
for (var i = 0; i < menu.length; i++)

    menu.eq(i).children('a').addClass('li-'+classes[i]);

【参考方案3】：

我会看看http://blog.mastykarz.nl/jquery-random-filter/

for (c in ['li-one', 'li-two', 'li-three', 'li-four', 'li-five'])
       // select the next link w/o a class starting with "li"
       $("a:not(class^=li):random").addClass(c);

【参考方案4】：

使用 jQuery 你可以做类似的事情

var classes = ['li-one', 'li-two', 'li-three', 'li-four', 'li-five'];

function randomizeList(listObj) 
    $(listObj).each(function() 
        $(this).addClass(classes[Math.Random()*classes.size]);
    );

【讨论】：

这可以将同一个类分配给两个不同的 div。

是的，直到我回答之后，我才意识到他实际上并不希望它们随机。我会把它留在这里，然后给 karim79 打气。

【参考方案5】：

类似于以下内容：

function randOrd() 
    return (Math.round(Math.random())-0.5); 


$(document).ready(function() 
    var klasses = [ 'li-one', 'li-two', 'li-three', 'li-four', 'li-five' ];
    klasses.sort( randOrd );
    $('#menu ul li a').each(function(i, val) 
        $(this).addClass(klasses[i]);
    );
);