javascript - 使用 MixItUp 在一个网格中进行多种排序

Question

使用 MixItUp 框架，我试图让用户对主网格中的各个网格执行 data-sort="random"。本质上，我想为每个小块设置一个“随机播放”控件，而不是将所有 block 混合在一起的排序控件。

<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>  

这很难解释，所以这里有一个 fiddle 可以帮助形象化它:http://jsfiddle.net/kyleclay/F4xAx/

MixItUp 文档站点的另一个链接:http://mixitup.io/

我在 SO 上发帖也是个新手，我刚刚创建了我的第一个 fiddle ，所以如果您需要我解释更多或做一些不同的事情，请告诉我。提前致谢。

Answer 1

好吧，我明白了。我必须为每个 block 设置单独的#grid 元素，然后为每个#grid 元素提供它们自己的 sortSelector。这是它的一般外观:

<!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>

如果有人想要它以供将来引用，我已经更新了 fiddle :http://jsfiddle.net/kyleclay/F4xAx/