如何在jQuery中按最近的日期时间重新排列数据属性上的子div?

Question

>我为每个部分设置了自己的类别名称，并希望根据data属性重新排列其子div 元素，该属性按顶部发布的最近日期时间排序，然后下降到底部。

我正在尝试遍历其父元素的每个子元素，但函数reArrangeVideosByRecentUploads()不起作用。我调试了它，它会停止在这一行代码$('.section' + ALPHA_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {，然后完全跳过该功能。代码中没有错误，所以我不确定为什么会这样。

var dates = [];
var _old;
var ALPHA_CLASS_NAME = ".alpha";
var BRAVO_CLASS_NAME = ".bravo";
var CHARLIE_CLASS_NAME = ".charlie";
function sortDates(a, b) {
return new Date(b).getTime() - new Date(a).getTime();
}
function reArrangeVideosByRecentUploads() {
if ($(this).parent('.section' + ALPHA_CLASS_NAME)) {
$('.section' + ALPHA_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
_old = $(this).parent();
dates.push($(this).data('date'));
sorted = dates.sort(sortDates);
_new = $('<div/>').insertBefore(_old);
$.each(sorted, function(i, val) {
$('div[data-date="' + val + '"]').appendTo(_new);
});
_old.remove();
});
} else if ($(this).parent('.section' + BRAVO_CLASS_NAME)) {
$('.section' + BRAVO_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
_old = $(this).parent();
dates.push($(this).data('date'));
sorted = dates.sort(sortDates);
_new = $('<div/>').insertBefore(_old);
$.each(sorted, function(i, val) {
$('div[data-date="' + val + '"]').appendTo(_new);
});
_old.remove();
});
} else if ($(this).parent('.section' + CHARLIE_CLASS_NAME)) {
$('.section' + CHARLIE_CLASS_NAME + ' .thumb .video-thumbnail').each(function(i) {
_old = $(this).parent();
dates.push($(this).data('date'));
sorted = dates.sort(sortDates);
_new = $('<div/>').insertBefore(_old);
$.each(sorted, function(i, val) {
$('div[data-date="' + val + '"]').appendTo(_new);
});
_old.remove();
});
}
}
reArrangeVideosByRecentUploads();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="alpha">
<h1>
Alpha
</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">A1 - 4/2012</div>
<div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">A2 - 6/2011</div>
<div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">A3 - 3/2013</div>
<div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">A4 - 1/2011</div>
<div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">A5 - 5/12/2016</div>
<div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">A6 - 5/19/2016</div>
<div class="video-thumbnail" data-date="2020-02-03T22:05:25.000Z">A7 - 2/2020</div>
<div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">A8 - 5/31/2016</div>
<div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">A9 - 1/2014</div>
</div>
</section>
<section class="bravo">
<h1>
Bravo
</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">B1 - 3/2013</div>
<div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">B2 - 1/2011</div>
<div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">B3 - 5/12/2016</div>
<div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">B4 - 5/19/2016</div>
</div>
</section>
<section class="charlie">
<h1>
Charlie
</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">C1 - 4/2012</div>
<div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">C2 - 6/2011</div>
<div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">C3 - 5/31/2016</div>
<div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">C4 - 1/2014</div>
</div>
</section>

JSfiddle

Answer 1

你把这有点复杂了。若要对元素进行排序，可以使用sort()方法。为此方法提供一个函数，该函数接受两个参数，这两个参数是迭代中要相互比较的元素。将data-date值转换为Date对象并进行比较，根据最新的对象返回1或-1。

为了保持逻辑干燥，您可以遍历所有section .thumb容器并单独对它们进行排序。试试这个：

$('section .thumb').each(function() {
$(this).find('div').sort(function(a, b) {
return new Date($(a).data('date')) < new Date($(b).data('date')) ? 1 : -1;
}).appendTo(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="alpha">
<h1>Alpha</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">A1 - 4/2012</div>
<div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">A2 - 6/2011</div>
<div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">A3 - 3/2013</div>
<div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">A4 - 1/2011</div>
<div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">A5 - 5/12/2016</div>
<div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">A6 - 5/19/2016</div>
<div class="video-thumbnail" data-date="2020-02-03T22:05:25.000Z">A7 - 2/2020</div>
<div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">A8 - 5/31/2016</div>
<div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">A9 - 1/2014</div>
</div>
</section>
<section class="bravo">
<h1>Bravo</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2013-03-05T18:35:47.000Z">B1 - 3/2013</div>
<div class="video-thumbnail" data-date="2011-01-24T15:20:14.000Z">B2 - 1/2011</div>
<div class="video-thumbnail" data-date="2016-05-12T17:25:43.000Z">B3 - 5/12/2016</div>
<div class="video-thumbnail" data-date="2016-05-19T08:32:24.000Z">B4 - 5/19/2016</div>
</div>
</section>
<section class="charlie">
<h1>Charlie</h1>
<div class="thumb">
<div class="video-thumbnail" data-date="2012-04-02T13:04:48.000Z">C1 - 4/2012</div>
<div class="video-thumbnail" data-date="2011-06-30T21:21:16.000Z">C2 - 6/2011</div>
<div class="video-thumbnail" data-date="2016-05-31T18:13:21.000Z">C3 - 5/31/2016</div>
<div class="video-thumbnail" data-date="2014-01-24T17:00:02.000Z">C4 - 1/2014</div>
</div>
</section>