How to show specific div class on order

user_1752841 0
Viewed 1142

I'm getting some data using loop to HTML DIVs. There can have many more data. Data showing something like below code.There have two classes for DIVs (test one and test two ) How to show all of "test one" data first and then "test two" data.How can i do this with javascript or Jquery?

My fiddle.

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>
css html jquery javascript
4 Answers

This can be achieved using the order property of 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>

user_55616050

Using the jQuery library that could be done by cloning the container then loop through the cloned instance and get the .one element first then the .two ones and append them to the original container after clearing it using $('.container').html(''); ,check the working snippet below.

Hope this will helps you.

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>

user_57621620 

    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>

user_83574030

You could make use of an simple Array.prototype.sort() on an array which contains the elements and replace the innerhtml of the .container element.

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>

user_55478180
Related