jquery sorting dom elements based on its css("color")

Question

Hello!

What you can see on following page is a list of usernames in some random order. I want to use jquery to sort them in this order:

red blue green purple black

http://www.arvag.net/test/sorting/

This is what i did so far:

<script type="text/javascript">
$(function() {
    var admin   = "rgb(255, 0, 0)";
    var moderator  = "rgb(00, 00, 255)";
    var text   = "rgb(00, 128, 00)";
    var vip   = "rgb(128, 00, 128)";

    var adminBuffer = [];
    var moderatorBuffer = [];
    var textBuffer = [];
    var vipBuffer = [];
    var html;

    $("div#active_users span.name").each(function(i) {
     color = $("a span",this).css("color");
     html = $(this).html();
     if(admin == color){
      adminBuffer[i] = "<span class='name'>" + html + "</span>";
     }
     //$(this).clone().append("&nbsp").appendTo('#rezultat');
    });
    jQuery.each(adminBuffer, function() {
     //alert(this);
     $(this).appendTo("#rezultat");
    });
});
</script>

I managed to get a match for the red one, but im simply failing to append it to another element with an id of "rezultat".

Any idea or sugestion is welcome!

Answer 1

Well i added class(admin, moderator, etc) to my elements and now its easy... ;) So thanks clintp for idea... :)

Answer 2

TinySort is a plugin to sort child nodes by (sub) contents or attributes. Very useful for ordering unordered lists or tables, but works on any type of node.