jQuery Sorting a list by span

Question

So i have something linke that:

<ul id="list">
<li class="item">
<a>
<span class="name> name1 </span>
</a>
<a>
<span class="name> name2 </span>
</a>
<a>
<span class="name> name3 </span>
</a>
</li>
</ul>

how can i sort this list by the name alphabeticaly?

kind regards

Answer 1

Try this plugin:

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

using a custom comparator, something like this:

$('li').sortElements(function(a, b){
    return $(a).find('.name').text() > $(b).find('.name').text() ? 1 : -1;
});

Answer 2

For simple cases, you don't even need a plugin. This code worked for me to sort a list of links:

function sortAlpha(a,b){
    return $(a).find('a').text().toLowerCase() > $(b).find('a').text().toLowerCase() ? 1 : -1;
};

$('#thelist li').sort(sortAlpha).appendTo('#thelist');

No need for span tags with this method.

(the basic idea isn't my own, I copied it from somewhere, but don't remember where from.)

Answer 3

• demo http://jsbin.com/itudoc/2

$(function() {
    var names = elements = [];
    $('.item .name').each(function(i, item) {
        var name = $.trim($(this).text()) + '_' + i;
        names[i] = name;
        elements[name] = $(this).parent().remove().clone();
    });
    $.each(names.sort(),function(i, item) {
        $('.item').append(elements[item]);
    });
});