Перемешивание DOM-элементов в jQuery

Опубликовано:

Иногда при разработке того или иного проекта требуется отобразить на странице несколько блоков случайным образом, например фотографии в альбоме или работы в портфолио. Такую задачу можно решить двумя способами, или перемешивать выводимые HTML-блоки еще на уровне сервера (например в PHP), или перемешать их уже на клиентской стороне в браузере при помощи JavaScript (в данном случае jQuery). Второй вариант в любом случае выигрывает, как минимум в простоте использования, нагрузки и обхода любого рода кеширования страниц сайта.

Итак, ниже представлен код, который можно подключать и использовать под видом плагина jQuery.

(function(jQuery){
    jQuery.fn.shuffle = function(){
        var allElems = this.get();

        var getRandom = function(max){
            return Math.floor(Math.random() * max);
        }

        var shuffled = jQuery.map(allElems, function(){
            var random = getRandom(allElems.length),
            randEl = jQuery(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
        });

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

        return jQuery(shuffled);
    };
})(jQuery);

Плагин в виде отдельного файла jquery.shuffle.js.

Представим, что нам нужно перемешать случайным образом элементы списка с классом “list”.

...
<head>
    ...
    <script type="text/javascript" src="jquery.shuffle.js"></script>
</head>
...
<div class="container">
    <ul class="list">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
...

Подключаем наш плагин (скрипт) и вызываем процедуру shuffle при выборке DOM-элементов в jQuery.

jQuery(document).ready(function(){
    jQuery('.container .list li').shuffle();
});