Comment afficher une classe de div spécifique lors d'une commande

Question

J'obtiens des données en utilisant une boucle vers des DIVs HTML. Il peut y avoir beaucoup plus de données. Il y a deux classes pour les DIVs ( test one y test two ) Comment afficher d'abord toutes les données du "test 1", puis celles du "test 2" ? javascript ou Jquery ?

Mon violon .

HTML

<div class="container">
   <div class="test one">1</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test two">2</div>
</div>

Answer 1

Cela peut être réalisé en utilisant le order de flexbox :

.container {
  display: flex;
  flex-direction: column;
}

.test.two {
  order: 2;
}

<div class="container">
  <div class="test one">1</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test two">2</div>
</div>

Answer 2

En utilisant la bibliothèque jQuery, cela peut être fait en clonant le conteneur, puis en bouclant à travers l'instance clonée et en obtenant l'attribut .one d'abord, puis l'élément .two et les ajouter au conteneur d'origine après l'avoir vidé à l'aide de la fonction $('.container').html(''); Vérifiez l'extrait de travail ci-dessous.

J'espère que cela vous aidera.

var container = $('.container').clone();

$('.container').html('');

container.find('.one').each(function() {
  $('.container').append($(this)[0].outerHTML);
})

container.find('.two').each(function() {
  $('.container').append($(this)[0].outerHTML);
})

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

<div class="container">
  <div class="test one">1</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test two">2</div>
</div>

Answer 3

    jQuery(document).ready(function($) {
      var items = $('.container .test').get();
      console.log(items);
      items.sort(function(a,b){
          var keyA = $(a).text();
          var keyB = $(b).text();

          if (keyA < keyB) return -1;
          if (keyA > keyB) return 1;
          return 0;
      });
      var container = $('.container');
      $.each(items, function(i, div){
          container.append(div);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="test one">1</div>
    <div class="test one">1</div>
    <div class="test two">2</div>
    <div class="test one">1</div>
    <div class="test two">2</div>
    <div class="test one">1</div>
    <div class="test two">2</div>
    <div class="test two">2</div>
  </div>

Answer 4

Vous pouvez utiliser un simple Array.prototype.sort() sur un tableau qui contient les éléments et remplacer le innerhtml de l'élément .container élément.

var elements = $('.container').children();
elements.sort(function(a,b){
    return a.className > b.className;
});
$('.container').html(elements);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="test one">1</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test two">2</div>
</div>