Элементы заказа на основе текста внутри них

Question

У меня есть несколько элементов, таких как

<div class="state">
   <div class="second-column col-xs-5">
       <p class="subtitle-compliance">Date</p>
       <p class="data-retrieve">16 Apr 2020 02:06 PM CST</p>
   </div>
</div>
<div class="state">
   <div class="second-column col-xs-5">
       <p class="subtitle-compliance">Date</p>
       <p class="data-retrieve">17 Apr 2020 02:06 PM CST</p>
   </div>
</div>

Я не знаю, сколько у меня будет в любое время, но мне нужно заказать их в HTML.

Я попытался отсортировать их следующим образом:

var divList = []
$('.state').each(function() {
    var element = $(this);
    divList.push(element);
});

divList.sort(function(a,b) {
    a1 = $(a).find('.second-column .data-retrieve').text()
    b1 = $(b).find('.second-column .data-retrieve').text()

    if(a1 > b1) return 1;
    if(a1 < b1) return -1;
    return 0;
});

И, похоже, сейчас мне это не подходит.

Answer 1

Используйте объект Date для преобразования даты в строки даты, затем сравните Date.getTime():

$("#sorted").html($('.state').clone().sort(function(a, b) {
  return new Date($(a).find(".data-retrieve").text()).getTime() - new Date($(b).find(".data-retrieve").text()).getTime() > 0 ? 1 : -1;
}))

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

<b>Original:</b>
<div class="state">
  <div class="second-column col-xs-5">
    <p class="subtitle-compliance">Date</p>
    <p class="data-retrieve">16 Apr 2020 02:06 PM CST</p>
  </div>
</div>
<div class="state">
  <div class="second-column col-xs-5">
    <p class="subtitle-compliance">Date</p>
    <p class="data-retrieve">15 Apr 2020 02:06 PM CST</p>
  </div>
</div>
<div class="state">
  <div class="second-column col-xs-5">
    <p class="subtitle-compliance">Date</p>
    <p class="data-retrieve">11 Apr 2020 02:06 PM CST</p>
  </div>
</div>
<div class="state">
  <div class="second-column col-xs-5">
    <p class="subtitle-compliance">Date</p>
    <p class="data-retrieve">17 Apr 2020 02:06 PM CST</p>
  </div>
</div>
<hr/>
<b>Sorted:</b>
<div id="sorted"></div>