случайно добавленные классы для div с тем же классом

Question

случайно добавленные классы для div с тем же классом

0

У меня есть несколько div с тем же классом. я хотел бы случайно добавить (другой) класс в каждый из этих div, но без повторений добавленного класса сразу после eachother.

здесь мой пример html:

<div class="sometext"> some text here </div>
<div class="sometext"> some other text here </div>
<div class="sometext"> some more text here </div>
<div class="sometext"> some more text here </div>
<div class="sometext"> some more text here </div>

пример css, который должен быть добавлен:

.addedclass1 {...}
.addedclass2 {...}
.addedclass2 {...}
.addedclass3 {...}
.addedclass4 {...}

что бы я хотел увидеть в конце:

<div class="sometext addedclass3"> some text here </div>
<div class="sometext addedclass2"> some other text here </div>
<div class="sometext addedclass4"> some more text here </div>
<div class="sometext addedclass1"> some more text here </div>
<div class="sometext addedclass2"> some more text here </div>

У меня есть jquery, который рандомизирует добавленный класс, но позволяет повторы:

$(document).ready(function() {
    var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'];

    $('.sometext').each(function(i) {
        $(this).addClass(
        classes[Math.floor(Math.random()*classes.length)]);
    });
});

я был бы рад за любую помощь - я кровавый начинающий :)

benniy 07 янв. 2014, в 19:11

Источник

Теги:

class

jquery

css

random

shuffle

4 ответа

0

Это поможет вам точно, выстрел, но эффективный:

$(function(){
    $(".sometext").each(function(){
        $(this).addClass("addedclass" + (Math.round(Math.random()*100 % $(".sometext").length) + 1));
    });
});

jsfiddle: http://jsfiddle.net/ashishanexpert/565ZC/1/

Или, если вы хотите случайно добавить класс из массива, вы можете сделать это следующим образом:

$(function(){
    var classList = ["addedclass1", "addedclass2", "addedclass3", "addedclass4"];

    $(".sometext").each(function(){
        $(this).addClass(classList[Math.round(Math.random()*100 % (classList.length - 1))]);
    });
});

jsfiddle: http://jsfiddle.net/ashishanexpert/565ZC/4/

Ashish Kumar 07 янв. 2014, в 17:13

0

благодарю вас! но, к сожалению, это, похоже, не исключает добавления одних и тех же классов друг за другом. во всяком случае, для рандомизации это работает хорошо.
benniy 08 янв. 2014, в 18:08

0

Это будет просто получить случайный индекс, пока он не будет отличаться от последнего.

$(document).ready(function() {

    var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'], 
        lastIndex = -1;

    $('.sometext').each(function(i) {
        var index;

        do {
            index = Math.floor(Math.random() / (classes.length- 1) * 10); 
        } while(index === lastIndex);

        lastIndex = index;

        $(this).addClass(classes[index]);

   });

});

Ceres 07 янв. 2014, в 16:29

0

Я просто удалю класс из массива после его использования, поэтому его нельзя будет использовать снова, а случайное число будет меньше. Если вам нужен массив для чего-то другого, просто создайте копию для этого.

alabount 07 янв. 2014, в 16:10

Ещё вопросы

благодарю вас! но, к сожалению, это, похоже, не исключает добавления одних и тех же классов друг за другом. во всяком случае, для рандомизации это работает хорошо.

andi · Accepted Answer · 2014-01-07T17-06-00.000Z

Я создавал бы временный массив каждый раз, содержащий все элементы из классов, кроме ранее использованного класса. Затем выберите случайный из этого.

JS Fiddle: http://jsfiddle.net/9AbRQ/

var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'];
var prevClass = "";
$('.sometext').each(function() {
    var classes2 = [];
    for (var i = 0; i < classes.length; i++) {
        if (classes[i] !== prevClass) {
            classes2.push(classes[i]);
        }
    }
    $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]);
});

Большое спасибо - работа как шарм! :)