0

Estou fazendo uma espécie de lista em foundation 5. Nessa lista há um cabeçário e o conteúdo, preciso que ao clicar no nome do campo no cabeçário, as DIV se ordenem conforme o conteúdo na ordem ASC e DESC. Pois bem, só conseguir fazer ordenar como ASC e pelo ID.

Segue um exemplo no JSFIDDLE e o código abaixo.

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);
  });
 });

1 Resposta 1

0

Bom, vou responder minha própria pergunta pois achei a solução desejada e por isso vou deixar aqui a resposta para ajudar outras pessoas.

Segue um exemplo no 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);
  });
 });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .