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