Ordenar Divs en Jquery Según el atributo 'data-sort'?

Question

Si tengo varios 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> 

Y crear dinámicamente los divs:

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

¿Cómo puedo conseguir que sólo una especie en los divs ya cargados en orden, sin tener que recargar todo de los divs?

Creo que necesitaría construir una matriz de los valores de clasificación de datos de todos los divs en la pantalla, y luego ver dónde encajan los nuevos divs, pero no estoy seguro de si este es el mejor camino.

Cualquier ayuda se agradece

Answer 1

uso de esta función

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

puede llamar a esta función justo después de la adición de nuevos divs

Answer 2

podría intentar jQuery, hay una buena clasificación de plugins disponibles.

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

Answer 3

Hice esto en una función de 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; } 
} 

Por lo que tener un gran div como "#boo" y todos tus pequeños divs dentro de allí:

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

Necesita el "? 1: -1" debido a un error en Chrome, sin esto no se ordenarán más de 10 divs. http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 4

respondido a la misma pregunta aquí:

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

volver a publicar:

Después de buscar a través de muchas soluciones que decidí blog acerca de cómo ordenar en jQuery [1]. En resumen, pasos para ordenar los objetos jquery "tipo array" por atributo de datos ...

1. seleccionar todos los objetos a través del selector de jQuery
2. convertir a la matriz real (no-matriz como objeto jQuery)
3. ordenar la matriz de objetos
4. convertir de nuevo a objeto jQuery con la serie de objetos 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>

selector de jQuery Llanura

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

permite clasificar los datos por este orden

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

Espero que esto ayude!

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

Answer 5

He utilizado este para ordenar una galería de imágenes donde la matriz tipo sería alterado por una llamada AJAX. Con suerte, puede ser útil para alguien.

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>

violín: http://jsfiddle.net/ruys9ksg/