jQuery Sortierelemente mit Daten-ID

Question

(Entschuldigung, wenn die Frage bereits existiert)

Ich bin sehr neu in jQuery Entwicklung.

Ich habe Struktur HTML 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 mag sie sortieren würde:

<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 verwende 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 gut zum ersten Mal, aber wenn neue Element hinzufügen oder die Daten-Sid ändern, funktioniert es nicht.

EDIT:

Demo

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

nicht?

Answer 1

können Sie dataset Eigenschaft, die alle der benutzerdefinierten data-* Attribute eines Elements speichert, es gibt eine Zeichenfolge zurück, in dem Fall, dass Sie die Zeichenfolge in eine Zahl konvertieren möchten Sie parseInt oder + Operator verwenden können. hier

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid; 
}).appendTo('.clist'); 

http://jsfiddle.net/CFYnE/

Und ja, funktioniert der Code, http://jsfiddle.net/f5mC9/

Edit: Bitte beachten Sie, dass IE10! und unten nicht unterstützen die .dataset Eigenschaft, wenn Sie alle Browser unterstützen möchten Sie .data() Methode jQuery stattdessen verwenden können:

$('.clist div').sort(function(a,b) { 
    return $(a).data('sid') > $(b).data('sid'); 
}).appendTo('.clist'); 

Answer 2

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison 
}).appendTo('.clist'); 

oder vielleicht

$('.clist div').sort(function(a,b) { 
    return parseInt(a.dataset.sid) - parseInt(b.dataset.sid); 
}).appendTo('.clist'); 

sort() behandelt Negativ/Positiv kehrt zurück;

Answer 3

Eine generische Funktionselemente sortieren mit jQuery:

$.fn.sortChildren = function (sortingFunction: any) { 

    return this.each(function() { 
     const children = $(this).children().get(); 
     children.sort(sortingFunction); 
     $(this).append(children); 
    }); 

}; 

Verbrauch:

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);