Sortowanie plików Div w Jquery Na podstawie atrybutu "sortowanie danych"?

Question

Jeśli mam kilka 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> 

I dynamicznie utworzyć DIV:

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

Jak mogę je po prostu porządek w div już załadowane w kolejności, bez konieczności przeładowania wszystko z div?

Myślę, że musiałbym zbudować tablicę wartości sortowania danych wszystkich elementów div na ekranie, a następnie zobaczyć, gdzie mieszczą się nowe elementy div, ale nie jestem pewien, czy to jest najlepsze droga.

Każda pomoc jest mile widziana

Answer 1

użycie tej funkcji

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

można wywołać tę funkcję tylko po dodaniu nowych div

Answer 2

można spróbować jQuery, jest ładny sortowania plugin dostępny.

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

Answer 3

zrobiłem to do funkcji 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; } 
} 

Więc mają duży div jak "#boo" i wszystkie twoje małe divy wewnątrz tam:

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

Potrzebujesz "? 1: -1" z powodu błędu w Chrome, bez tego nie będzie sortować więcej niż 10 elementów div! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 4

odpowiedział na to samo pytanie tutaj:

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

Aby odśwież:

Po przeszukiwaniu wielu rozwiązań postanowiłem blog o tym, jak rozwiązać w jQuery [1]. Podsumowując, kroki do sortowania jquery obiektów "tablicowych" według atrybutów danych ...

1. zaznaczyć cały obiekt poprzez selektor jquery
2. konwertować do rzeczywistej tablicy (nie array-jak jQuery obiektu)
3. posortować tablicę obiektów
4. przekonwertować z powrotem do obiektu jquery z tablicy Domu sprzeciwia

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>

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

Pozwala to rozwiązać przez danych rzędu

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

nadzieję, że to pomaga!

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

Answer 5

ta była wykorzystywana do sortowania galerii obrazów gdzie macierz rodzaj ulegnie zmianie przez wywołanie AJAX. Mam nadzieję, że może się to przydać komuś.

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/