jQuery функция сортировки по динамическому атрибуту c данных

Question

Я использую функцию сортировки, чтобы переупорядочить мои div численно (1-2-3)

function sortByShop_reOrder() {
   $('#store_list .store_item').sort(function(a, b) {
      return $(a).data('order') - $(b).data('order');
   }).appendTo('#store_list');
 }


<div id="store_list">
   <div class="store_item store_item_11" data-order="1">1</div>
   <div class="store_item store_item_21" data-order="2">2</div>
   <div class="store_item store_item_22" data-order="3">3</div>
</div>

У меня есть вызов ajax, который выполняется каждые 15 секунд:

 $.ajax({
    type:"POST",
    url: "someURL",
    dataType: 'json',
    data: "data=random",
        success:function(data) {
          var array = data;
              $.each(array, function (i) {
                  var store_order = array[i]['store_order'];
                  var store_id = array[i]['store_id'];
                  $('.store_item_'+store_id).attr('data-order', store_order);
              });
          sortByShop_reOrder()
        }
})

ARRAY (store_ids отличаются от моего кода ниже):

это динамически обновляет значение атрибута порядка данных:

<div id="store_list">
   <div class="store_item store_item_11" data-order="1">1</div>
   <div class="store_item store_item_22" data-order="3">3</div>
   <div class="store_item store_item_21" data-order="2">2</div>
</div>

Сейчас когда я перезапускаю sortByShop_reOrder (), он не переупорядочивает мои div (1-2-3), он просто остается прежним (1-3-2).

Есть идеи? Функция не видит обновленное значение порядка данных?

Answer 1

Используйте метод .data() , поскольку вы сортируете по .data():

$.each(dataArr, function(i, obj) {
  $('.store_item_' + obj.store_id).data('order', obj.store_order); // Update data
});
sortByShop_reOrder(); // sort by data

Пример:

function sortByShop_reOrder() {
  $('#store_list .store_item').sort(function(a, b) {
    return $(a).data('order') - $(b).data('order');
  }).appendTo('#store_list');
}

function demoAJAX(dataArr) {
  $.each(dataArr, function(i, obj) {
    $('.store_item_' + obj.store_id).data('order', obj.store_order);
  });
  sortByShop_reOrder()
}

sortByShop_reOrder(); // do immediately and...
setTimeout(function(){ // after 4 sec
  demoAJAX([
    {"store_order":"1", "store_id":"11"},
    {"store_order":"2", "store_id":"21"},
    {"store_order":"3", "store_id":"22"}
  ])
}, 4000);

<div id="store_list">
  <div class="store_item store_item_11" data-order="2">2</div>
  <div class="store_item store_item_21" data-order="3">3</div>
  <div class="store_item store_item_22" data-order="1">1</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>