Сортировка по одному погружению с помощью jquery

Question

Я создаю одну группу li, и я хочу отсортировать полный li на основе одной даты ниже - мой код

, пожалуйста, проверьте мой код, указанный ниже.

$(document).on('change','#exampleSelect',function(){
    var filter = $(this).val();
    if (filter == 'Newest') 
    {
    	function parseDate(input) {
		  var parts = input.match(/(\d+)/g);
		  return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4], parts[5]); 
		}

		var elems = $.makeArray($(".dateDiv"));
		elems.sort(function(a, b) {
		    return parseDate( $(a).text() ) < parseDate( $(b).text() ).find('.sorted_li').addClass('strike');
		});
		$(".past-exams").html(elems);​
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="exampleSelect" class="form-control">
	<option value="Newest">Newest</option>
	<option value="Oldest">Oldest</option>
	<option value="Best">Best</option>
	<option value="Worst">Worst</option>
</select>
<ul class="past-exams">
	<li class="sorted_li">
		<span class="grade grade-low">10%</span>
		<ul>
			<li class="dateDiv"><strong>Sep 24, 2019 05:06 AM</strong></li>
			<li><strong>Exam Time: </strong>00:00:19</li>
		</ul>
	</li>
	<li class="sorted_li">
		<span class="grade grade-low">40%</span>
		<ul>
			<li class="dateDiv"><strong>Sep 17, 2019 12:58 AM</strong></li>
			<li><strong>Exam Time: </strong>00:00:15</li>
		</ul>
	</li>
	<li class="sorted_li">
		<span class="grade grade-low">20%</span>
		<ul>
			<li class="dateDiv"><strong>Sep 17, 2019 12:13 AM</strong></li>
			<li><strong>Exam Time: </strong>00:03:18</li>
		</ul>
	</li>
</ul>

Я пытался отсортировать li с помощью этого кода jquery, но мне это не удалось.

Может кто-нибудь помочь мне с этим.

Answer 1

В вашей логике сортировки есть несколько ошибок, в основном в вашей функции parseDate():

function parseDate(input) {
    var parts = input.match(/(\d+)/g);
    return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4], parts[5]);
}

Если разбить ее, сначала посмотрите на значение параметра input:

"Sep 24, 2019 05:06 AM"

При этом вы вызываете .match(/(\d+)/g), который возвращает следующее:

var parts = input.match(/(\d+)/g); // [ "24", "2019", "05", "06" ]

Как видите, массив содержит четыре значения.Затем вы пытаетесь получить доступ к элементам в массиве, которые не существуют:

return new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4], parts[5]);
//                                                        ^^^^^^^^  ^^^^^^^^

..., что эквивалентно:

return new Date("24", "2018", "05", "06", undefined, undefined);

Очевидно, что это недопустимый формат датыпоэтому ваше возвращаемое значение из parseDate() равно Invalid Date.

Даже если parseDate() вернул действительную дату, основная проблема здесь заключается в том, что вы пытаетесь вызвать метод jQuery .find() дляDate object:

elems.sort(function(a, b) {
    return parseDate( $(a).text() ) < parseDate( $(b).text() ).find('.sorted_li').addClass('strike');
    //                                                        ^^^^^
});

---

Решение

Гораздо более простой способ анализа даты в вашем коде - использовать строку даты (input) в качестве Date параметр¹², вот так:

var input = "Sep 24, 2019 05:06 AM";
var date  = new Date(input).getTime(); // returns number of milliseconds since "Unix Epoch"

console.log(date);

Используя вышеизложенное, вы можете сравнить даты внутри вашего .sort() цикла следующим образом:

elems.sort(function(a, b) {
    var dateA = new Date($(a).text()).getTime();
    var dateB = new Date($(b).text()).getTime();

    return dateA < dateB;
});

Соберите все вместе впример (я немного переформатировал ваш код для удобства чтения):

$(document).on('change', '#exampleSelect', function() {
  var filter = $(this).val();

  if (filter == 'Newest') {
    var elems = $.makeArray($('.dateDiv'));

    elems.sort(function(a, b) {
      var dateA = new Date($(a).text()).getTime();
      var dateB = new Date($(b).text()).getTime();

      return dateA < dateB;
    });

    $('.past-exams').html(elems);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="exampleSelect" class="form-control">
  <option value="Newest">Newest</option>
  <option value="Oldest" selected>Oldest</option>
  <option value="Best">Best</option>
  <option value="Worst">Worst</option>
</select>
<ul class="past-exams">
  <li class="sorted_li">
    <span class="grade grade-low">10%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 24, 2019 05:06 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:19</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">40%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:58 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:15</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">20%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:13 AM</strong></li>
      <li><strong>Exam Time: </strong>00:03:18</li>
    </ul>
  </li>
</ul>

---

¹ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

² https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime