How to show specific div class on order

Question

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

How to show specific div class on order

Sign up