Перемешивание элементов в DOM контейнере в случайном порядке

Код позволяет перемешать элементы в каком-то контейнере. Зачем это надо? Например, картинки для слайдера выводятся из трех разных источников (например, 5 картинок с автомобилями, 5 с монетами, 5 с фруктами). Вывести их вразнобой средствами бекэнда проблематично, оставить на фронте сгруппированными - некрасиво. Хорошее решение - после загрузки страницы перемешать их.

    
    (function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

$('.slider img').shuffle();  //укажите ваш элемент


Теги: JQuery, JavaScript, шпаргалки

Сообщение отправлено

Закрыть