Sort DIV’s by content thereof

Question

I am making a kind of list in Foundation 5. In this list there is a head and the content, I need that when clicking on the field name in the head, the DIV is ordered according to the content in the order ASC and DESC. Well, all I can do is sort as ASC and ID.

Follow an example on JSFIDDLE and the code below.

HTML:

<div class="row">
  <div id="id" class="small-4 columns">
    ID
  </div>
  <div id="cidade" class="small-4 columns">
    Cidade
  </div>
  <div id="cidade2" class="small-4 columns">
    Cidade
  </div>
</div>
<div class="row">
  <hr>
</div>
<div id="container">
  <div class="row">
    <div class="small-4 columns id">
      2
    </div>
    <div class="small-4 columns cidade">
      São Paulo
    </div>
    <div class="small-4 columns cidade2">
      Curitiba
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      1
    </div>
    <div class="small-4 columns cidade">
      Curitiba
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      3
    </div>
    <div class="small-4 columns cidade">
      Curitiba
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
</div>

JS:

$("#id").click(function(){
  var mylist = $('#container');
  var listitems = mylist.children('div').get();
  listitems.sort(function(a, b) {
     var compA = $(a).text().toUpperCase();
     var compB = $(b).text().toUpperCase();
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  })
  $.each(listitems, function(idx, itm) { 
    mylist.append(itm);
  });
 });
 $("#cidade").click(function(){
  var mylist = $('#container');
  var listitems = mylist.children('div').get();
  listitems.sort(function(a, b) {
     var compA = $(a).text().toUpperCase();
     var compB = $(b).text().toUpperCase();
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  })
  $.each(listitems, function(idx, itm) { 
    mylist.append(itm);
  });
 });
 $("#cidade2").click(function(){
  var mylist = $('#container');
  var listitems = mylist.children('div').get();
  listitems.sort(function(a, b) {
     var compA = $(a).text().toUpperCase();
     var compB = $(b).text().toUpperCase();
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  })
  $.each(listitems, function(idx, itm) { 
    mylist.append(itm);
  });
 });

Answer 1

Well, I will answer my own question because I found the desired solution and so I will leave here the answer to help other people.

Follow an example on JSFIDDLE

HTML:

<input type="hidden" value="asc" id="sort">
<div class="row">
  <div id="id" class="small-4 columns click">
    ID
  </div>
  <div id="cidade" class="small-4 columns click">
    Cidade
  </div>
  <div id="cidade2" class="small-4 columns click">
    Cidade
  </div>
</div>
<div class="row">
  <hr>
</div>
<div id="container">
  <div class="row">
    <div class="small-4 columns id">
      2
    </div>
    <div class="small-4 columns cidade">
      São Paulo
    </div>
    <div class="small-4 columns cidade2">
      Curitiba
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      1
    </div>
    <div class="small-4 columns cidade">
      Curitiba
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      3
    </div>
    <div class="small-4 columns cidade">
      Curitiba
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      3
    </div>
    <div class="small-4 columns cidade">
      Curitiba
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
  <div class="row">
    <div class="small-4 columns id">
      5
    </div>
    <div class="small-4 columns cidade">
      Arapongas
    </div>
    <div class="small-4 columns cidade2">
      São Paulo
    </div>
  </div>
</div>

JS:

$(".click").click(function(){
    var classe = $(this).attr('id');
  var mylist = $('#container');
  var listitems = mylist.children('.row').get();
  listitems.sort(function(a, b) {
     var compA = $(a).find('.'+classe).text().toUpperCase();
     var compB = $(b).find('.'+classe).text().toUpperCase();
     if($("#sort").val()=='asc'){
         return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
     } else {
       return (compA > compB) ? -1 : (compA < compB) ? 1 : 0;
     }
  })
  if($("#sort").val()=='asc'){
    $('#sort').val('desc');
  } else {
    $('#sort').val('asc');
  }
  $.each(listitems, function(idx, itm) { 
    mylist.append(itm);
  });
 });