CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pedro
Pedro

Reputation: 1450

How to display sorted divs into HTML

I'm working with this piece of JS to sort a group of divs, with the code that I have, I able to get the values(id) of each div and I push the values into an array, then I sort the array.

The problem is that I don't know how to display the sorted divs again into the screen. I tried this but it only displays the id value, is there a way to display the sorted divs ?

for (var j=0; j<portfolio.length; j++)
{
    $('#portfolio-divs').append(portfolio[j]);
}

Full Code 

          <br><br>

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2"> 
              <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 2</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->  

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1"> 
              <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 1</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4"> 
              <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 4</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->   

           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3"> 
              <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 3</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->  

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6"> 
              <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 6</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->  

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5"> 
              <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 5</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

          <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8"> 
              <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 8</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->   

           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7"> 
              <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
              <h3 align="center">Website 7</h3> 
          </div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

        </div> <!-- ./row -->
      </div>

JS: 

var x = document.getElementsByClassName('pss');

var portfolio = new Array;

for(var i=0; i<x.length; i++)
{ 
    var y = document.getElementsByClassName('pss')[i].getAttribute('id');
    portfolio.push(y); 
}

portfolio.sort();

for (var j=0; j<portfolio.length; j++)
{
    $('#portfolio-divs').append(portfolio[j]);
}

Upvotes: 0

Views: 53

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can just change html content of parent div with sorted content using html() DEMO. 

var sorted = $('.pss').sort(function(a, b) {
  return $(a).attr('id').localeCompare($(b).attr('id'))
})

$('.row').html(sorted)

In case you have multiple elements you want to sort, in this case multiple .rows then you need to loop each one and run sort inside DEMO.

$('.row').each(function() {
  var sorted = $(this).find('.pss').sort(function(a, b) {
    return $(a).attr('id').localeCompare($(b).attr('id'))
  })

  $(this).html(sorted)
})

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

You want to create an object from the ID string.

$('#portfolio-divs').append($('#'+portfolio[j]));


var x = document.getElementsByClassName('pss');

var portfolio = new Array;

for (var i = 0; i < x.length; i++) {
  var y = document.getElementsByClassName('pss')[i].getAttribute('id');
  portfolio.push(y);
}

portfolio.sort();

for (var j = 0; j < portfolio.length; j++) {
  $('#portfolio-divs').append($('#'+portfolio[j]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2">
  <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 2</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1">
  <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 1</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4">
  <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 4</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3">
  <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 3</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6">
  <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 6</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5">
  <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 5</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8">
  <center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 8</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7">
  <center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
  <h3 align="center">Website 7</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->

</div>
<!-- ./row -->
</div>

<h1>portfolio-divs</h1>

<div id="portfolio-divs"></div>

Upvotes: 1

Related Questions