javascript - 按重复模式中的数据属性对元素进行排序

Question

我想对当前列出的一些元素进行排序:

<div data-type="1"></div>
<div data-type="1"></div>
<div data-type="1"></div>
<div data-type="2"></div>
<div data-type="2"></div>
<div data-type="2"></div>
<div data-type="3"></div>
<div data-type="3"></div>
<div data-type="3"></div>
<div data-type="4"></div>

等等...

我想要的顺序是 1,2,3,4,1,2,3,4,1,2,3,4 等。某个特定的可能会少一些数字，因此最后可能是 1,2,4,1,2,1 。如果 JQuery 能够简化代码的话，我正在使用它。

编辑:

我尝试使用 JS 排序功能，但没有成功，因为在达到 4 后我无法将其重置为 1。这是为我提供 4 种不同类型的生成内容的方式，但我不能更改后端中的任何内容。

Answer 1

这个怎么样？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function ()
        {
            var loopcounter = 1;
            var sortmarker = 0;
            $("#sortdata").children().each(function (index)
            {
                var typeid = $(this).data("type");

                if (loopcounter == typeid)
                {
                    sortmarker = sortmarker + 10;
                }
                else
                {
                    loopcounter = typeid;
                    sortmarker = 10;
                }
                $(this).data("sortid",sortmarker)
            });
            $("#sortdata div").sort(function (a, b)
            {
                return ($(b).data('sortid')) < ($(a).data('sortid')) ? 1 : -1;
            }).appendTo('#sortdata');
        });
       </script>

<div id="sortdata">
        <div data-type="1">1</div>
        <div data-type="1">1</div>
        <div data-type="1">1</div>
        <div data-type="2">2</div>
        <div data-type="2">2</div>
        <div data-type="2">2</div>
        <div data-type="3">3</div>
        <div data-type="3">3</div>
        <div data-type="3">3</div>
        <div data-type="4">4</div>
    </div>

https://jsfiddle.net/m20b80wj/30/