Как добавить случайный класс в список ссылок

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть следующая структура.

 <ul id="dyn_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a>
        <ul class="submenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>

Первый уровень li (ul#dyn_nav>li) должен получать случайные классы из заданного списка.

Классы бывают синими, зелеными, пурпурными, голубыми, красными и т.д…

Я хочу, чтобы динамический цвет этого меню не был фиксированным.

Например, у одного может быть зеленый цвет первого меню, у другого — синий. Это всего лишь моя идея.

jQuery, пожалуйста.

Ответ №1:

 $(document).ready(function() {
    var classes = ['blue', 'green', 'magenta', 'cyan', 'red'];
    $('ul#dyn_nav>li').each(function(i) {
        $(this).addClass(
            classes[Math.floor(Math.random()*classes.length)]);
    });
});

Я также добавил ul#dyn_nav>li>a { color: inherit; } в таблицу стилей, чтобы цвет влиял на ссылку в li , а не только на маркер.

1. некоторое время классы повторяются: (

2. Ну, в этом случае есть шесть пунктов меню и только пять цветов, так что по крайней мере один должен быть повторен. Если у вас по крайней мере столько же классов, сколько элементов, то вы можете использовать подход перетасовки их в случайном порядке и применения их по очереди к элементам.

Ответ №2:

Поместите ваши цвета в массив, рандомизируйте его и используйте jQuery.каждый с помощью addClass для присвоения значений.

Ответ №3:

Дутов прав. @Wazdesign: Вы также можете попробовать этот фрагмент:

 function rand(){ return (Math.round(Math.random())-0.5); }
    var colors = new Array('blue','yellow','red','green');//you can add more class here
    var init = colors.sort( rand );
    $('ul li').each(function(i,el){ 
     $(el).addClass(init[i]); 
   });