web-dev-qa-db-fra.com

Éléments de tri jQuery utilisant l'ID de données

J'ai une structure HTML comme suit:

<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>

Je voudrais les trier comme:

<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>

J'utilise la fonction suivante:

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) ? (astts > bstts) ? 1 : 0 : -1;
    });

    contacts.append(cont);
}

Cela ne fonctionne pas comme prévu.

Il fonctionne bien pour la première exécution, mais après avoir ajouté un nouvel élément ou modifié le data-sid attribue que cela ne fonctionne plus.

Démo: http://jsfiddle.net/f5mC9/1/

Ne fonctionne pas?

javascriptjqueryhtmlsorting
37
user1834809

Vous pouvez utiliser la propriété dataset qui stocke tous les attributs data-* Personnalisés d'un élément, elle renvoie une chaîne, au cas où vous voudriez convertir la chaîne en un nombre, vous pouvez utiliser parseInt ou + opérateur.

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

http://jsfiddle.net/CFYnE/

Et oui, votre code fonctionne ici, http://jsfiddle.net/f5mC9/

Edit: Veuillez noter que IE10! et ci-dessous ne prennent pas en charge la propriété .dataset, si vous souhaitez prendre en charge tous les navigateurs, vous pouvez utiliser la méthode .data() de jQuery à la place:

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

ou peut-être

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

sort () gère les retours négatifs/positifs;

9
devside

Une fonction plus générique pour trier les éléments à l'aide de jQuery:

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

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

};

Usage:

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