Sort DIV's for the content of the same

Question

Sort DIV's for the content of the same

Navigation

#1 by (-1 votes)

-1

I am making a sort of list in foundation 5. In this list there is a header and the content, I need that when clicking the name of the field in the header, the DIVs are sorted according to the content in ASC and DESC order. Well, just get ordering as ASC and ID.

Here's an example in 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);
  });
 });

javascript html jquery

asked by anonymous 23.05.2017 / 23:30

1 answer

How to make the amount of IVD to adapt How do I calculate age using php and html? [duplicate]

score -1 · Answer 1

Well, I'm going to answer my own question because I've found the desired solution and so I'll leave the answer here to help other people.

Follow the example 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);
  });
 });