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
test two
javascript
Jquery
<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.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>