sanbg sanbg - 1 year ago 96
HTML Question

How to show specific div class on order

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>

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download