javascript - 按属性 nodeValue 对节点列表进行排序

Question

假设我有一个节点列表

NodeList(5) [div.card, div.card, div.card, div.card, div.card]
0    :    div.card
1    :    div.card
2    :    div.card
3    :    div.card
4    :    div.card
length    :    5
__proto__    :    NodeList

我想根据 div 的名为 data-start 的数据属性使用比较函数进行排序

var cards = document.querySelectorAll('.card');
Array.from(cards).sort( function(a,b){
    let a = a.attributes[2].nodeValue; 
    let b = b.attributes[2].nodeValue;

    return a - b;

}).forEach(el => {
    document.querySelector('.right3').appendChild(el);
});

但是我继续获取元素，而不是按它们的数据属性值排序，在我的例子中是 ISOString [ex. “2018-01-08T20:39:00Z”]。

在这里查看 JsFiddle! Js Fiddle containing basic html, css

Answer 1

你能试试这个吗

var cards = document.querySelectorAll('.card');
Array.from(cards).sort( function(a,b){
    a = new Date(a.attributes[2].nodeValue).valueOf() 
    b = new Date(b.attributes[2].nodeValue).valueOf()

    return a - b;

}).forEach(el => {
    document.querySelector('.right3').appendChild(el);
});

问题是您正在比较两个结果为 NaN(不是数字)的字符串。这会将日期转换为 unix 时间戳，这只是一个数字，然后将它们进行比较。

基于您的 fiddle 的示例:https://jsfiddle.net/sd41k6mj/4/