Trier les Divs dans Jquery basé sur L'attribut "data-sort"?
si j'ai plusieurs divs:
<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>
et je crée dynamiquement les divs:
<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>
Comment puis-je les faire juste trier dans les divs déjà chargés dans l'ordre, sans avoir à recharger toutes les divs?
je pense que j'aurais besoin pour construire un tableau de données-trier les valeurs de tous les divs sur l'écran, et ensuite voir où le nouveau divs, d', mais je ne suis pas sûr si c'est le meilleur moyen.
toute aide est appréciée
4 réponses
utiliser cette fonction
$('div').sort(function (a, b) {
var contentA =parseInt( $(a).attr('data-sort'));
var contentB =parseInt( $(b).attr('data-sort'));
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
vous pouvez appeler cette fonction juste après avoir ajouté de nouvelles divs
j'en ai fait une fonction jQuery:
jQuery.fn.sortDivs = function sortDivs() {
$("> div", this[0]).sort(dec_sort).appendTo(this[0]);
function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; }
}
donc vous avez une grande div comme "# boo" et toutes vos petites divs à l'intérieur de là:
$("#boo").sortDivs ();
Vous avez besoin de l' "? 1: -1 " A cause d'un bug dans Chrome, sans cela il ne triera pas plus de 10 divs! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
a répondu à la même question ici:
à reporter:
après avoir cherché de nombreuses solutions, j'ai décidé de blog sur la façon de trier dans jquery . En résumé, les étapes pour trier jQuery" tableau-like " objets par attribut de données...
- Sélectionner tout objet via jquery sélecteur
- convertir un tableau réel (pas de tableau comme objet jquery)
- trier le tableau des objets
- convertir en revenir à l'objet jquery avec le tableau d'objets dom
Html
<div class="item" data-order="2">2</div> <div class="item" data-order="1">1</div> <div class="item" data-order="4">4</div> <div class="item" data-order="3">3</div>
simple jQuery selector
$('.item');
[<div class="item" data-order="2">2</div>, <div class="item" data-order="1">1</div>, <div class="item" data-order="4">4</div>, <div class="item" data-order="3">3</div> ]
permet de trier ceci par ordre de données
function getSorted(selector, attrName) {
return $($(selector).toArray().sort(function(a, b){
var aVal = parseInt(a.getAttribute(attrName)),
bVal = parseInt(b.getAttribute(attrName));
return aVal - bVal;
}));
}
> getSorted('.item', 'data-order')
[<div class="item" data-order="1">1</div>, <div class="item" data-order="2">2</div>, <div class="item" data-order="3">3</div>, <div class="item" data-order="4">4</div> ]
voir comment getSorted() fonctionne.
Espérons que cette aide!
j'ai utilisé ceci pour trier une galerie d'images où le tableau de tri serait modifié par un appel ajax. Nous espérons qu'elle puisse être utile à quelqu'un.
var myArray = ['2', '3', '1'];
var elArray = [];
$('.imgs').each(function() {
elArray[$(this).data('image-id')] = $(this);
});
$.each(myArray,function(index,value){
$('#container').append(elArray[value]);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='container'>
<div class="imgs" data-image-id='1'>1</div>
<div class="imgs" data-image-id='2'>2</div>
<div class="imgs" data-image-id='3'>3</div>
</div>violon: http://jsfiddle.net/ruys9ksg/