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

Question

Владимир Ковалев @VannDogg

Trainee Wordpress Developer

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

Привет всем! Есть проблема - нужно сделать возможность сортировать 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, то есть по его значению. Сортироваться должно по убыванию. Находил кучу решений, но ни одно не работало у меня. Помогите, кто чем может.

Вопрос задан более трёх лет назад
1607 просмотров

1 комментарий

Подписаться 2 Простой 1 комментарий

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

Answer 1 · 2018-01-09 18:05:00

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

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

Войдите на сайт