sort list ul->li in function for different ids

Question

I came from What is the easiest way to order a <UL>/<OL> in jQuery?

works fine.

But I need this on different ids, so I tried to put it in a function.

I tried:

var sortmenues = ['#firstid', '#secondid', '#anotherid'];

function sortuls(paths) {
    jQuery.each(paths,function(index, value) {
        var items = jQuery(value).get();
        items.sort(function(a,b){
            var keyA = jQuery(a).text();
            var keyB = jQuery(b).text();

            if (keyA < keyB) return -1;
            if (keyA > keyB) return 1;
            return 0;
        });
        var ul = jQuery(value);
        jQuery.each(items, function(i, li){
            ul.append(li);
        });
    });
}

jQuery(function() {
    sortuls(sortmenues);
});

But I doesn't work, just for the first element in array.

I tried to duplicate the snippet, but I just works on first element, too.

like:

var items = jQuery('#firstid li').get();
...
var ul = jQuery('#firstid');
...
}); 
var items = jQuery('#secondid li').get();
...
var ul = jQuery('#secondid');
...
});

also this doesn't work for all elements:

jQuery.each([ '#firstid', '#secondid' ], function( index, value ) {
    var items = jQuery(value + ' li').get();

    items.sort(function(a,b){
        var keyA = jQuery(a).text();
        var keyB = jQuery(b).text();

        if (keyA < keyB) return -1;
        if (keyA > keyB) return 1;
        return 0;
    });
    var ul = jQuery(value);
    jQuery.each(items, function(i, li){
        ul.append(value + 'li');
    });
});

Can somebody please tell me, what I am doing wrong?

the html is

...
<ul id="firstid">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
</ul>
...
<ul id="anotheridNosortinghere">
    <li>Alphaa</li>
    <li>Betaa</li>
    <li>Gammaa</li>
    <li>Deltaa</li>
</ul>
...
<ul id="secondid">
    <li>Alphaa</li>
    <li>Betaa</li>
    <li>Gammaa</li>
    <li>Deltaa</li>
</ul>
...

Could you please add your HTML to the question. – Rory McCrossan Jul 20 '16 at 11:59 — Rory McCrossan, Jul 20 '16 at 11:59

score 0 · Accepted Answer · answered Jul 20 '16 at 12:27

Given your HTML you can just do a simple loop through the selectors for each ul your provide, sorting the child li elements by their text value as you go. Try this:

$('#firstid, #secondid').each(function() {
    $(this).find('li').sort(function(a, b) {
     return $(a).text() < $(b).text() ? -1 : 1;
    }).appendTo(this);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="firstid">
    <li>Delta</li>
    <li>Beta</li>
    <li>Alpha</li>
    <li>Gamma</li>
</ul>

<ul id="anotheridNosortinghere">
    <li>Deltaa</li>
    <li>Gammaa</li>
    <li>Alphaa</li>
    <li>Betaa</li>
</ul>
^ Not sorted

<ul id="secondid">
    <li>Betaa</li>
    <li>Alphaa</li>
    <li>Deltaa</li>
    <li>Gammaa</li>
</ul>

YESSIR, this is what im looking for. i think my major issue was the "ul.append(li);" instead of ".appendTo(this);" you helped me much! — heiko813, Jul 20 '16 at 13:48

sort list ul->li in function for different ids

1 Answers1