Sort elements by Data Attributes in repeating pattern

Question

I'd like to sort some elements which current listed like this:

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

etc...

I want order then in the pattern of 1,2,3,4,1,2,3,4,1,2,3,4 etc. There may be less on a certain number so at the end it maybe 1,2,4,1,2,1 for example. I'm using JQuery if that simplifies the code at all.

Edit:

I've tried using the JS sort function to no avail because I can't get it to reset to 1 after getting to 4. This is the way 4 different types of generated content are given to me and I can't change anything in the backend.

Two questions: What have you tried? Why is your HTML being generated like this? There's a chance you don't need jQuery and can make this happen with your back-end language(assuming you are using one). — Aaron Eveleth
– Aaron Eveleth, Commented Oct 3, 2017 at 21:12
Classic ASP, it’s generated in a CMS, though I don’t have access to change how that code is outputted. — Tom Carter
– Tom Carter, Commented Oct 3, 2017 at 21:26
Ah, you don't have access. In that case I'll work on adding an answer below. I do think this should be sorted on the back-end. So if possible, reach out to the person/people who work on the back-end and request they order the data appropriately before generating the HTML. — Aaron Eveleth
– Aaron Eveleth, Commented Oct 3, 2017 at 21:33

Joseph Norris · Accepted Answer · 2017-10-04 22:28:50Z

How about this?

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

cyr_x · Accepted Answer · 2017-10-03 22:06:12Z

So you want it be sorted like this:

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>

Collectives™ on Stack Overflow

Sort elements by Data Attributes in repeating pattern

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related