Tuesday, 15 June 2010

javascript - Sort through multiple list using jQuery -



javascript - Sort through multiple list using jQuery -

i have multiple list on page. illustration of list looks this:

<ul class="effects-list"> <li data-sorte="2">creative</li> <li data-sorte="1">euphoric</li> <li data-sorte="2">uplifted</li> <li data-sorte="1">energetic</li> <li data-sorte="0">lazy</li> <li data-sorte="1">focused</li> <li data-sorte="2">happy</li> <li data-sorte="0">talkative</li> <li data-sorte="0">giggly</li> <li data-sorte="0">tingly</li> <li data-sorte="0">hungry</li> <li data-sorte="0">sleepy</li> <li data-sorte="0">aroused</li> </ul>

i have script remove data-sorte equals 0. after done, sorts list highest lowest (again numbers stored in data-sorte). takes top 3 options , removes rest.

here script this:

$('*[data-sorte="0"]').remove(); $(".effects-list li").sort(sort_li_effects).appendto('.effects-list'); function sort_li_effects(a, b){ homecoming ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1; } $(".effects-list li").filter( function(k, v) { if( k < 3 ) { min = parseint($(v).data('sorte')); homecoming false; } else homecoming min > parseint($(v).data('sorte')); }).remove();

the problem have sorts of list based on first list. question how modify script sorts of list on page correctly?

here jsfiddle working code shows problem.

edit

to clarify point. lets have next list:

<ul class="effects-list"> <li data-sorte="2">creative</li> <li data-sorte="1">euphoric</li> <li data-sorte="2">uplifted</li> <li data-sorte="1">energetic</li> <li data-sorte="0">lazy</li> <li data-sorte="1">focused</li> <li data-sorte="1">happy</li> <li data-sorte="0">talkative</li> <li data-sorte="0">giggly</li> <li data-sorte="0">tingly</li> <li data-sorte="0">hungry</li> <li data-sorte="0">sleepy</li> <li data-sorte="0">aroused</li> </ul>

i want show creative, uplifted, euphoric, energetic, focused , happy top options numbers. euphoric, energetic, focused , happy tied @ 1 want show them all. original script this.

i modified script.

$('*[data-sorte="0"]').remove(); $(".effects-list").each(function() { var $list = $(this), $items = $list.find('li'), sortes = []; $items.detach().sort(sort_li_effects).filter(function(i) { var sorte = $(this).data('sorte'); if (i < 3) { sortes.push(sorte); homecoming true; } homecoming sortes.indexof(sorte) >= 0; }).appendto($list); }); function sort_li_effects(a, b) { homecoming ($(a).data('sorte')) < ($(b).data('sorte')) ? 1 : -1; }

http://jsfiddle.net/kk2bv/5/ or http://jsfiddle.net/kk2bv/6/ or http://jsfiddle.net/kk2bv/3/

major differences:

it goes through li in every list , sorts correctly it removes unnecessary items @ 1 time using li:gt(2)

javascript jquery

No comments:

Post a Comment