Как сделать сортировку html элементов по атрибуту data-*?

Question

[Владимир Ковалев]

Привет всем! Есть проблема - нужно сделать возможность сортировать html элементы по data- атрибуту.
Пример: есть у меня элемент с идентификатором body в нем несколько блоков классом listing-item и атрибутом data-event-date.

< div id="body" >
< div class="listing-item" data-event-date="2017-05-02" >< /div >
< div class="listing-item" data-event-date="2018-01-07" >< /div >
< div class="listing-item" data-event-date="2017-06-05" >< /div >
< div class="listing-item" data-event-date="2018-01-03" >< /div >
< div class="listing-item" data-event-date="2017-08-08" >< /div >
< /div >

Нужно сделать так, чтобы по клику они сортировались по атрибуту data-event-date, то есть по его значению. Сортироваться должно по убыванию. Находил кучу решений, но ни одно не работало у меня. Помогите, кто чем может.

Comments

[freeek]

Чтобы сразу отсеять неработающие решения и проблемы с подключение библиотек/версий и т.д. предлагаю по старой доброй традиции сделать вам пример на https://jsfiddle.net/, чтобы лучше понять суть проблемы. Возможно, у вас просто неверно сравниваются даты, ибо сортировка вообще дело нехитрое.

Answer 1

[Yustas Alexu]

<button id="sort" type="button">Sort</button>
  <br><br>
  
  <div id="body">
    <div class="listing-item" data-event-date="2017-05-02">2017-05-02</div>
    <div class="listing-item" data-event-date="2018-01-07">2018-01-07</div>
    <div class="listing-item" data-event-date="2017-06-05">2017-06-05</div>
    <div class="listing-item" data-event-date="2018-01-03">2018-01-03</div>
    <div class="listing-item" data-event-date="2017-08-08">2017-08-08</div>
  </div>

=============================================================

const items = [...document.querySelectorAll('.listing-item')];

function compare(a, b) {
	const aData = new Date($(a).data('event-date'));
  const bData = new Date($(b).data('event-date'));
  if (aData < bData) {
    return -1;
  }
  if (aData > bData) {
    return 1;
  }
  return 0;
}

$('#sort').on('click', () => {
	items.sort(compare);
  $('#body').empty();
	items.forEach(item => {
  	$('#body').append(item);
  });
});

Comments

[Владимир Ковалев]

Спасибо большое, все заработало!

Answer 2

[Юрий]

<div id="body">
  <div class="listing-item" data-event-date="2017-05-02">2017-05-02</div>
  <div class="listing-item" data-event-date="2018-01-07">2018-01-07</div>
  <div class="listing-item" data-event-date="2017-06-05">2017-06-05</div>
  <div class="listing-item" data-event-date="2018-01-03">2018-01-03</div>
  <div class="listing-item" data-event-date="2017-08-08">2017-08-08</div>
</div>

<script>
  var body = document.getElementById("body");
  var listElms = body.getElementsByClassName("listing-item");
  var sortedElms = Array.prototype.slice.call(listElms).sort(function(a, b) { 
    return a.dataset.eventDate > b.dataset.eventDate
  });

  for (var i = 0; i < sortedElms.length; i++) {
    body.appendChild(sortedElms[i]);
  }
</script>