How do i search through and sort a collection of li's using jquery?

Question

Hi,

i got some li's that i'd like to sort and search through using jquery.

I've found http://plugins.jquery.com/project/TinySort to sort things and http://stackoverflow.com/questions/1428645/search-through-a-big-list-fast-with-jquery to search through the li's.

Is there a good plugin that can handle both things (search+sort) or is the way to go to combine to two solutions in the links above?

edit: in short, i'm searching for something like this http://www.datatables.net/, but instead of a table it should work on a ul with li's

Thanks!

Answer 1

Well, I always prefer to do such a thing in my own code because of too much variance.

A good start is to hold all your LI objects within an array (which already owns some simple sorting methods).

Searching & Sorting within an array should not be a problem.

var li_elements = [];
for(var i = 0; i < 10; i++){
    var exampleli = $('<li/>', {text: 'I am an example', id: 'id'+i});
    li_elements.push(exampleli);
}

Now you could sort/search/delete and finally add those li's to an UL element.

Answer 2

Maybe the easiest way would be to iterate over all LI items and assign them to an array which you sort afterwards:

var output = [];
$("LI.myclass").each(function()
{
    // Assumes your sort criteria is a numeric something in a class name.
    var res = $(this).attr("class").match(/\bmysome(\d+)\b/);
    if (!res) continue;
    output[res[1]] = this;
});

// output now contains all the LIs with numeric indexes according to your search
// criteria - sort them!
output.sort();

// Assign the LIs
$("UL#mylist").html("").append(output);