Shuffle List Items

For example, Shuffle List Items...

Demo

  • Html
  • Html5
  • Css
  • Css3
  • JavaScript
  • jQuery
  • Bootstrap

HTML

<ul class="shuffle-list-items">
    <li>Html</li>
    <li>Html5</li>
    <li>Css</li>
    <li>Css3</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Bootstrap</li>
</ul> 
<button type="button" class="shuffleBtn">Shuffle On</button> 

Javascript

$.fn.shufflelistitems = function() {
    $.each(this.get(), function(index, el) {
        var $el = $(el);
        var $find = $el.children();

        $find.sort(function() {
            return 0.5 - Math.random();
        });

        $el.empty();
        $find.appendTo($el);
    });
};

$('.shuffleBtn').click(function() {
    $(".shuffle-list-items").shufflelistitems();
});

Copyright 2016 by WebiBeris.com. All Rights Reserved.