Wie ein DIV OnClick Jquery nach Wert eines benutzerdefinierten Attributs zu sortieren?

Question

Dieser Code eignet sich hervorragend zum Sortieren eines dynamisch erstellten div:

<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>

<div id="addnew">Add New</div>

   $('#addnew').live('click',function() {

    newdiv = $("<div id='4'>AA</div>");

    div_id_after = Math.floor(parseFloat(newdiv.get(0).id));

    $('#'+div_id_after).after(newdiv);

});

Alles, was ich tun möchte, ist, dieselbe Funktion zu nehmen und sie so zu gestalten, dass sie ein benutzerdefiniertes Attribut "data-sort=" anstelle von ID verwendet.

Mit freundlichen Grüßen

Answer 1

Von Ihrem Element aus können Sie getAttribute() .

var elem = newdiv.get(0);

var div_id_after = elem.getAttribute('data-sort');

---

Oder mit jQuery können Sie die .data() Methode.

var div_id_after = newdiv.data('sort');

Das funktioniert, weil jQuery die HTML5 data Attribute auch bei älteren Browsern.

Answer 2

Verwenden Sie einfach newdiv.attr('data-sort'), um auf ein benutzerdefiniertes Attribut Ihres div zuzugreifen

UPDATE:

Wenn Sie später über alle div-Elemente iterieren und das Attribut "data-sort" zum Sortieren verwenden möchten, würden Sie mit jQuery etwa so vorgehen:

$("div.sortableDivClass").each(function(index, item) {
   var order = item.getAttribute('data-sort');
   // do the reshuffle based on the order
    ...

});