jquery - Hole li sort by one div with 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>

我试图用这个 jquery 代码对 li 进行排序，但我没有做到这一点。

谁能帮我解决这个问题。

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() 方法>日期对象:

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