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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 2, 2017 at 12:07 Mohammed Acharki 24422 silver badges1414 bronze badges asked Oct 2, 2017 at 11:17 sanbgsanbg 6788 bronze badges 7

• 1 "How to show all of "test one" data first and then "test two" data.". Clarify this. – dfsq Commented Oct 2, 2017 at 11:21
• Show data based on what?? and class name can't have space in your case... – Yash Parekh Commented Oct 2, 2017 at 11:22
• test one = 1 test two = 2, Current display order is like this 1 1 2 1 2 1 2 2 i want to show 1111 first.. – sanbg Commented Oct 2, 2017 at 11:23
• he means sorting it using CSS.. like showing all divs with .one and then showing all . two - as far as I know that is not possible without a programming or scrpting langauge i.e JavaScript in this case – Hamzaouiii Commented Oct 2, 2017 at 11:24
• Like this? jsfiddle/1m0c2qex/2 – Moshe Harush Commented Oct 2, 2017 at 11:24

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 6

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>

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

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

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