jquery trier l'élément avec la valeur du tableau

Question

J'ai besoin de trier certains éléments en fonction de cet attribut. Pour un exemple:

<div id="sort"> 
<div n="1"></div> 
<div n="2"></div> 
<div n="3"></div> 
<div n="4"></div> 
</div> 

Et array_num

{3, 2, 1, 4} 

code pseudo:

$('#sort').sort(array_num, 'n'); 

résultats seront:

<div id="sort"> 
<div n="3"></div> 
<div n="2"></div> 
<div n="1"></div> 
<div n="4"></div> 
</div> 

Answer 1

​var order = [3, 2, 4, 1]​; 
var el = $('#sort'); 
var map = {}; 

$('#sort div').each(function() { 
    var el = $(this); 
    map[el.attr('n')] = el; 
}); 

for (var i = 0, l = order.length; i < l; i ++) { 
    if (map[order[i]]) { 
     el.append(map[order[i]]); 
    } 
} 

Full code here

Answer 2

non testé ...

$.fn.asort = function (order, attrName) { 
    for(var i = 0, len = order.length; i < len; ++i) { 
     this.children('[' + attrName + '=' + order[i] + ']').appendTo(this); 
    } 
} 

Answer 3

je suis tombé sur ce en essayant de corriger ce que je recherchais. J'ai pris la méthode de @ shrikant-sharat et ajouté un peu car l'attribut que j'avais besoin de trier était en fait sur un élément enfant. Je pensais que je ajouterais ici au cas où il aide tout le monde (et pour l'avenir moi!)

$.fn.asort = function (order, attrName, filter) { 
    console.log(this.length, order.length, order); 
    for(var i = 0, len = order.length; i < len; ++i) { 

    if(typeof(filter) === 'function') { 
     filter(this.children(), attrName, order[i]).appendTo(this); 
    } else { 
     this.children('[' + attrName + '=' + order[i] + ']').appendTo(this); 
    } 
    } 
    return this.children(); 
} 

Il vous permet de passer d'une fonction de filtre pour correspondre à l'élément que vous êtes après. Ce n'est pas le plus efficace je suppose, mais cela fonctionne pour moi, par exemple:

$('.my-list').asort(mapViewOrder, 'data-nid', function(items, attrName, val) { 
    return items.filter(function(index, i) { 
    return ($(i).find('[' + attrName + '="' + val + '"]').length); 
    }); 
});