JQuery - sort li
I don't know why, but this code doesn't sort mine correctly. They change the order, but, for example, if they are like 1, 5, 2, 9, then it changes to 5, 2, 9, 1.
JQuery code:
var sorter_type=new Array("date_sort","price_sort","discount_sort","time_sort");
function sorting_by_filter(filter_id,field)
{
var sort_type="";
if($('#'+filter_id).attr("class")=="asc")
{
$('#'+filter_id).removeClass("asc");
$('#'+filter_id).addClass("desc");
sort_type=" desending";
}
else
{
$('#'+filter_id).removeClass("desc");
$('#'+filter_id).addClass("asc");
sort_type="";
}
for(i=0;i<sorter_type.length;i++)
{
if(sorter_type[i]==filter_id)
{
$('#'+filter_id).parent().attr("class","");
$('#'+filter_id).parent().addClass("clsTop_Menu_Act"+sort_type);
}
else
{
$("#"+sorter_type[i]).parent().attr("class","");
}
}
var $sort = $('#'+filter_id);
var $list = $('.clsDeal_Whole_Cont');
var $listLi = $('li.clsDeal_Blk_Cont',$list);
$listLi.sort(function(a, b){
var keyA = parseInt($(a).attr(field));
var keyB = parseInt($(b).attr(field));
if($($sort).hasClass('asc')){
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA < keyB) ? 1 : 0;
}
});
$.each($listLi, function(index, row){
$list.append(row);
});
}
button code:
<ul class="clearfix" id="filters">
<li class="clsTop_Menu_Act"><a href="javascript:void(0)" class="asc" onclick="sorting_by_filter('date_sort','title')" id="date_sort">New</a></li>
<li><a href="javascript:void(0)" onclick="sorting_by_filter('price_sort','price')" class="asc" id="price_sort">Price</a></li>
<li><a href="javascript:void(0)" onclick="sorting_by_filter('discount_sort','discount')" class="asc" id="discount_sort">Discount</a></li>
<li><a href="javascript:void(0)" onclick="sorting_by_filter('time_sort','time_left')" class="asc" id="time_sort" >Time Left</a></li>
</ul>
which needs to be sorted:
<ul class="clsDeal_Whole_Cont clearfix">
<li class="clsDeal_Blk_Cont" style="display:block" id="deal_1" price="2" discount="50" time_left="1360363800">
<li class="clsDeal_Blk_Cont" style="display:block" id="deal_10" price="20" discount="45" time_left="1360363700">
<li class="clsDeal_Blk_Cont" style="display:block" id="deal_5" price="19" discount="80" time_left="1360363800">
</ul>
source to share
Perhaps because you never return -1
from your callback. Always only 1
or 0
, which is also not true.
If you sort in ascending order, you need to return -1
(a negative number), if keyA
less keyB
, 0
if they are equal or +1
(a positive number) if keyA
more than keyB
.
Example:
$listLi.sort(function(a, b){
var keyA = parseInt($(a).attr(field), 10);
var keyB = parseInt($(b).attr(field), 10);
// sorts in descending order. The result will be
// negative if keyA > keyB
// 0 if keyA == keyB
// positive if keyA < keyB
var result = keyB - keyA;
if ($sort.hasClass('asc') {
// multiplying by -1 reverses the order
result = result * (-1);
}
return result;
});
Read the Array#sort
documentation for more information on sorting callbacks .
source to share
As Felix Kling points out, your sort function is not up to zero. These are the conditions a valid type should address, from the MDN documentation :
- If
compareFunction(a, b)
less than 0, sort a to a lower index than b. - If it
compareFunction(a, b)
returns 0, leave a and b unchanged relative to each other, but sorted across all the different elements. Note. The ECMAscript standard does not guarantee this behavior, and therefore not all browsers (eg Mozilla versions dated at least 2003) respect this. - If
compareFunction(a, b)
greater than 0, sort b with a lower index than a. -
compareFunction(a, b)
must always return the same value when given specific pairs of a and b as two arguments. If inconsistent results are returned, the sort order is undefined
He already posted a working sort function (and 1 got my link to the documentation), so I'll just point you to a jQuery UI plugin to do the work of implementing this in the future: jQuery UI Sortable .
source to share