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/

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

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

2 个答案: