Ordina Div in Jquery Basato su Attribute 'data-sort'?

Question

Se ho diverse div:

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

E creare dinamicamente le div:

<div data-sort='14'>div1</div> 
<div data-sort='6'>div1</div> 
<div data-sort='9'>div1</div> 

Come posso farli appena sorta in div già caricati in ordine, senza dover ricaricare tutto dei div?

Penso che avrei bisogno di costruire un array dei valori di ordinamento dei dati di tutti i div sullo schermo, e poi vedere dove si inseriscono i nuovi div, ma non sono sicuro che questo sia il migliore modo.

Ogni aiuto è apprezzato

Answer 1

uso questa funzione

$('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; 
    }) 

si può chiamare questa funzione solo dopo l'aggiunta di nuovi div

Answer 2

si potrebbe provare a jQuery, c'è una bella ordinamento plug disponibili.

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Answer 3

Ho fatto questo in una funzione 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; } 
} 

Così si avere un grande div come "#boo" e tutte le tue piccole div al suo interno lì:

$ ("# boo"). sortDivs();

È necessario il "? 1: -1" a causa di un bug in Chrome, senza di esso non sarà possibile ordinare più di 10 div! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 4

risposto alla stessa domanda qui:

• https://stackoverflow.com/a/23298715/1007358

Per ripubblicare:

Dopo la ricerca attraverso molteplici soluzioni ho deciso di blog su come ordinare in jQuery [1]. In breve, passaggi per ordinare oggetti "array-like" jquery in base all'attributo data ...

1. selezionare tutti gli oggetti dal selettore jQuery
2. convertire in matrice reale (oggetto jquery non matrice simile)
3. sorta la matrice di oggetti
4. riconvertire all'oggetto jQuery con l'array di oggetti 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>

selettore jQuery Plain

> $('.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> 
]

Lets Ordina dalla tecnica d'ordine

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

Spero che questo aiuti!

[1] http://blog.troygrosfield.com/2014/04/25/jquery-sorting/

Answer 5

Ho usato questo per ordinare una galleria di immagini in cui l'array ordinamento sarebbe alterata da una chiamata ajax. Spero che possa essere utile a qualcuno.

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>

Fiddle: http://jsfiddle.net/ruys9ksg/