Перемішування 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();
});