Multiple Sorts in One Grid with MixItUp

Using the MixItUp framework, I'm trying to allow the user to perform a data-sort="random" to individual grids within a master grid. Essentially, I want to have a "Shuffle" control for each little block instead of one sort control that mixes all of the blocks together.

<ul>
<a href="#" class="sort" data-sort="random">Shuffle</a>
</ul>

<ul id="Grid">
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
<div class="block1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="two"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="three"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="four"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
    <li class="mix" id="five"></li>
</div>
</ul>  

This is difficult to explain, so here is a fiddle to help visualize it: http://jsfiddle.net/kyleclay/F4xAx/

And another link to the MixItUp documentation site: http://mixitup.io/

I'm also kind of a newb at posting on SO and I just created my first fiddle, so let me know if you need me to explain more or do something differently. Thanks in advance.

Answers


Alright I figured it out. I had to set up separate #grid elements for each block, then give each #grid element their own sortSelector. Here is the general look of it:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
<script src="jquery.js"></script>
<script src="jquery.mixitup.js"></script>
<script type="text/javascript">
    $(function(){
        $('#Grid1').mixitup({
            sortSelector: '.shuffle1',
        })
            $('#Grid2').mixitup({
            sortSelector: '.shuffle2',
        });
    }); 
</script>
</head>
<body>

<ul>
    <a href="#" class="shuffle1" data-sort="random">Randomize</a>
    <a href="#" class="shuffle2" data-sort="random">Randomize</a>
</ul>

<ul id="Grid1">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    ...
</ul>

<ul id="Grid2">
    <li class="mix" id="one"></li>
    <li class="mix" id="one"></li>
    ...
</ul>

</body>

I've updated the fiddle if anybody would like it for future reference: http://jsfiddle.net/kyleclay/F4xAx/


Need Your Help

Understanding variable capture by closures in Javascript/Node

javascript node.js closures

Is there a definite source on variable capture in Javascript besides the standard (it's a pain to read the standard)?