以重复模式按数据属性对元素进行排序答案

【问题标题】：Sort elements by Data Attributes in repeating pattern以重复模式按数据属性对元素进行排序
【发布时间】：2017-10-05 06:28:50
【问题描述】：

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

<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 种不同类型的生成内容的方式，我不能更改后端中的任何内容。

【问题讨论】：

两个问题：你试过什么？为什么你的 HTML 会这样生成？您可能不需要 jQuery，并且可以使用您的后端语言来实现这一点（假设您使用的是一种）。
编辑了我的答案。
你使用什么后端语言？
经典 ASP，它是在 CMS 中生成的，但我无权更改该代码的输出方式。
啊，你没有访问权限。在这种情况下，我将在下面添加一个答案。我确实认为这应该在后端进行排序。因此，如果可能，请联系在后端工作的人员，并要求他们在生成 HTML 之前对数据进行适当的排序。

标签： javascript jquery sorting custom-data-attribute

【解决方案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/

【讨论】：

【解决方案2】：

所以你希望它像这样排序：

function sort(elements) {
  var i = 0, last = Number.MIN_SAFE_INTEGER, result = [];
  var types = elements.map(function(el) {
    return { 
      element: el, 
      type: +el.getAttribute('data-type')
    }
  });
  
  while(types.length) {
    if(last < types[i].type) {
      last = types.splice(i, 1)[0]; 
      result.push(last.element);
      last = last.type;
    } else {
      i++;
    }
    if(i >= types.length) {
      i = 0; 
      last = Number.MIN_SAFE_INTEGER;
    }
  }
  return result;
}

// test
var sortButton = document.querySelector('.sort');
var resetButton = document.querySelector('.reset');
var container = document.querySelector('.container');
var elements = [].slice.call(document.querySelectorAll('[data-type]'));

sortButton.addEventListener('click', function() {
  sort(elements).forEach(el => {
    container.appendChild(el);
  });
});
resetButton.addEventListener('click', function() {
  elements.sort(function(a, b) {
    return a.getAttribute('data-type') - b.getAttribute('data-type');
  }).forEach(el => {
    container.appendChild(el);
  });
});

<div class="container">
  <div data-type="1">a 1</div>
  <div data-type="1">b 1</div>
  <div data-type="1">c 1</div>

  <div data-type="2">a 2</div>
  <div data-type="2">b 2</div>
  <div data-type="2">c 2</div>

  <div data-type="3">a 3</div>
  <div data-type="3">b 3</div>
  <div data-type="3">c 3</div>

  <div data-type="4">a 4</div>
</div>
<button class="sort">sort</button>
<button class="reset">reset</button>

【讨论】：