sort li elements using javascript or jquery

Question

In my page i have the the folowing. I need to sort it out using javascript.

<li class="cat2 lang1">Hello</li>
<li class="cat2 lang1">Hello</li>
<li class="cat1 lang2">Hello</li>
<li class="cat3 lang3">Hello</li>

what i tried is:

$('#movieFeatureFilter span#selGenre .subMenus li').click(function()
{
    if(this.id != '')
    {
        $('.movie_lists ul li').hide();
        $('.movie_lists ul li.cat'+this.id).show();
    }
    else $('.movie_lists ul li').show();
});

this works perfect. but what i need to sort the list using the combination of lang and cat.

ie if i select cat1 as category and lang2 as language then it might show the third li

i think you got wht i mean. sorry for the bad explanention. help me pls

see jsfiddle.net/arunpjohny/Nnqdw/1 is that what you are looking for — Arun P Johny
– Arun P Johny, Commented Sep 16, 2013 at 2:14

Arun P Johny · Accepted Answer · 2013-09-16 02:29:38Z

2

var $items = $('ul li'), $cat = $('#cat'), $lang = $('#lang');
$('#cat, #lang').change(function(){
    var cat = $cat.val(), lang = $lang.val(), $filtered = $items;
    if(cat){
        $filtered = $filtered.filter('.' + cat);
    }
    if(lang){
        $filtered = $filtered.filter('.' + lang);
    }
    $items.not($filtered).hide();
    $filtered.show()
})

Demo: Fiddle

answered Sep 16, 2013 at 2:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amantur · Accepted Answer · 2013-09-16 02:20:01Z

0

Seems instead of sorting you want to show/hide items based on selection of cat and lang. Following function will serve your purpose:

$("#movieFeatureFilter span#selGenre .subMenus li").click(function () {

   /*GET cat AND lang FROM DROPDOWNS*/

    var cat = $("#c").val(),
        lng = $("#l").val();

    $("#<ID OF UL> li").filter(function () {
        $this = $(this);
        if ($this.hasClass(cat)) {
            if (!$this.hasClass(lng)) {
                $this.hide();
            } else {
                $this.show();
            }
        } else {
            $this.hide();
        }
    });
});

Check in the fiddle here.

answered Sep 16, 2013 at 2:20

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Collectives™ on Stack Overflow

sort li elements using javascript or jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related