(sorry wenn die frage schon existiert)

Ich bin sehr neu in der jQuery-Entwicklung.

Ich habe eine HTML-Struktur wie folgt:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=1></div>
</div>

Ich möchte sie sortieren als:

<div class="clist">
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=1></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
    <div data-sid=2></div>
</div>

Ich benutze die Funktion

function sortContacts() {
var contacts = $('div.clist'), cont = contacts.children('div');

cont.detach().sort(function(a, b) {
            var astts = $(a).data('sid');
            var bstts = $(b).data('sid')
            //return astts - bstts;
            return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
        });

contacts.append(cont);
}

Aber es funktioniert nicht wie erwartet ..

Es funktioniert zum ersten Mal gut, aber wenn Sie ein neues Element hinzufügen oder die Daten ändern, funktioniert es nicht.

BEARBEITEN:

Demo

http://jsfiddle.net/f5mC9/1/

funktioniert nicht?