éléments Trier par attributs de données en motif répétitif

Question

je voudrais trier certains éléments qui énumérait comme courant ceci:

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

Je veux alors l'ordre dans le modèle de 1,2,3,4,1,2,3,4,1,2,3,4 etc. Il peut y avoir moins sur un certain nombre donc à la fin il peut être 1,2,4,1,2,1 par exemple. J'utilise JQuery si cela simplifie le code du tout.

Edit:

J'ai essayé d'utiliser la fonction de tri JS en vain parce que je ne peux pas l'obtenir pour remettre à 1 après avoir à 4. Ceci est la façon dont 4 différents types de contenus générés sont donnés pour moi et je ne peux rien changer dans le backend.

Answer 1

Comment cela?

<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

Donc, vous voulez qu'elle soit triée comme ceci:

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>