Question

我有2个div

<div class="row events-list-section employee-hour-detail-section 11-28-2017">
</div>
<div class="row events-list-section employee-hour-detail-section 11-27-2017">
</div>

div有公共类employee-hour-detail-section和date作为额外的类。

我想根据日期对这些div进行排序。我怎样才能做到这一点？我希望输出日期排序。

<div class="row events-list-section employee-hour-detail-section 11-27-2017">
</div>
<div class="row events-list-section employee-hour-detail-section 11-28-2017">
</div>

Answer 1

要完成这项工作，您需要知道确切的日期值。在类中执行此操作是可能的，但它将是脆弱和丑陋的代码。

相反，我建议将日期放入HTML中的data变量，然后您可以通过比较sort()处理程序中的值进行排序，如下所示：

＆＃13;

$('.events-list-section').sort(function(a, b) {
  var aDate = $(a).data('date'), bDate = $(b).data('date');
  return new Date(aDate) - new Date(bDate);
}).appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row events-list-section employee-hour-detail-section" data-date="11-28-2017">11-28-2017</div>
<div class="row events-list-section employee-hour-detail-section" data-date="12-31-2017">12-31-2017</div>
<div class="row events-list-section employee-hour-detail-section" data-date="01-01-2018">01-01-2018</div>
<div class="row events-list-section employee-hour-detail-section" data-date="11-27-2017">11-27-2017</div>

＆＃13;

我可以使用javascript根据类对我的div进行排序

1 个答案: