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

I need to swap 2 files with each other C#

c#

I'm trying to swap 2 files with each other. I'm trying to do this, but it isn't working. the file is replacing but the backup file is not creating. Do you have any other solution please?

Can I grant append-only permission to a google drive file?

google-drive-sdk

I am developing an iOS app to manage data for a company. I would like to maintain the data files in a single Google Drive and grant full access to a DBA, view access to all users, and append-only ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.