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

Question

我需要做的就是在我的菜单中我想在每次函数启动时添加一个类(下面列出的)以及完全随机的顺序(页面加载)

这是我的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

我花了很多时间试图弄明白没有结果

非常感谢您的帮助

Answer 1

类似于以下内容:

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]);
    });
});

Answer 2

使用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]);
    });
}