Сортировать div в jQuery на основе атрибута «сортировка данных»? - PullRequest
Новая
       10

Сортировать div в jQuery на основе атрибута «сортировка данных»?

61 голосов
/ 26 мая 2011

Если у меня есть несколько дел: 

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

И я динамически создаю div: 

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

Как мне заставить их просто отсортировать по уже загруженным элементам div по порядку, без необходимости перезагружать все элементы div?

Я думаю, что мне нужно было бы создать массив значений сортировки данных всех элементов div на экране, а затем посмотреть, куда помещаются новые элементы div, но я не уверен, что это лучший способ.

Ответы [ 4 ]

96 голосов
/ 26 мая 2011

используйте эту функцию 

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

, вы можете вызывать эту функцию сразу после добавления новых div

20 голосов
/ 16 июня 2013

Я превратил это в функцию 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; }
}

Итак, у вас есть большой div, такой как "#boo", и все ваши маленькие div'ы внутри:

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

Вам понадобится "? 1: -1" из-за ошибки в Chrome, без этого он не будет сортировать более 10 делений!http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

7 голосов
/ 25 апреля 2014

Ответили на тот же вопрос здесь:

Для репостов:

После поиска множества решений я решил написать в блоге о том, как сортировать в jquery . Таким образом, шаги для сортировки jquery "массивоподобных" объектов по атрибуту данных ...

  1. выбрать все объекты с помощью селектора jquery
  2. преобразовать в фактический массив (не в массив, похожий на объект jquery)
  3. сортировка массива объектов
  4. преобразовать обратно в объект jquery с массивом объектов 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>

Простой селектор jquery 

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

Позволяет отсортировать по порядку данных 

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

Посмотрите, как работает getSorted ().

Надеюсь, это поможет!

0 голосов
/ 19 февраля 2015

Я использовал это для сортировки галереи изображений, где массив сортировки будет изменен с помощью вызова ajax.Надеюсь, это кому-нибудь пригодится. 

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>

Скрипка: http://jsfiddle.net/ruys9ksg/

...