使用 href javascript 對無序列表進行排序

Question

我有一個無序列表：

<ul id = "mylist">
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>

我想把它們分類成

<ul>
  <li a href="#">11-10-2019</a></li>
  <li a href="#">10-10-2019</a></li>
  <li a href="#">5-10-2019</a></li>
</ul>

PS : I want the same URL, just using '#' here to avoid work.

但是我目前編寫的代碼沒有正確排序。 我猜是因為href？

我的代碼：

var container = document.getElementById("myList");
var contents = container.querySelectorAll("li");

var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);

}

list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

/* list.reverse(); */

for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

Answer 1

您正在選擇li元素。 他們的innerHTML看起來像這樣：

'<a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a>'

而不是對這個值的parseInt進行排序，你應該對a元素的innerHTML進行排序，並且可能比parseInt做更精確的工作。 例如：

/// Compares two dates in d-m-Y format.
function compareDates(a, b) {
    var aParts = a.split('-').map(Number);
    var bParts = b.split('-').map(Number);

    return aParts[2] - bParts[2] ||
           aParts[1] - bParts[1] ||
           aParts[0] - bParts[0];
}

和

list.sort(function(a, b){
    var aDate = a.children[0].innerHTML;
    var bDate = b.children[0].innerHTML;

    return compareDates(aDate, bDate);
});

Answer 2

您可以直接使用li的textContent獲取日期，然后將它們直接作為日期對象進行比較，假設結構相同。

 var container = document.getElementById("myList"); var contents = Array.from(container.querySelectorAll("li")); contents = contents.sort(function(a, b){ var aa = new Date(a.textContent.replace('-','/')); var bb = new Date(b.textContent.replace('-','/')); console.log(aa,bb); return aa < bb? 1: (aa > bb? -1: 0); }); console.log(contents.map(x =>x.innerHTML)); while (container.firstChild) { container.removeChild(container.firstChild); } contents.forEach(content => { container.appendChild(content); });

 <ul id = "myList"> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li> <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>

Answer 3

這是實現目標的另一種方法，將文本解析為日期，清除容器，然后用新創建的list items填充它：

 var container = document.getElementById("myList"); var contents = Array.from(container.querySelectorAll("li>a")); contents.sort(function(a, b){ var aa = Date.parse(a.textContent); var bb = Date.parse(b.textContent); return aa < bb? -1: (aa > bb? 1: 0); }); /* contents.reverse(); */ //clear the container container.innerHTML = ''; for(var i=0; i<contents.length; i++){ listElem = document.createElement('li'); listElem.appendChild(contents[i]); container.appendChild(listElem); }

 <ul id="myList"> <li><a href="#">10-10-2019</a></li> <li><a href="#">11-10-2019</a></li> <li><a href="#">5-10-2019</a></li> </ul>

Answer 4

您不需要太多更改代碼：

你只需要做出改變：

var aa = new Date(a.querySelector('a').innerHTML).getTime();
var bb = new Date(b.querySelector('a').innerHTML).getTime();

 var container = document.querySelector("#mylist"); var contents = container.querySelectorAll("li"); var list = [...contents]; list.sort(function(a, b){ var aa = new Date(a.querySelector('a').innerHTML).getTime(); var bb = new Date(b.querySelector('a').innerHTML).getTime(); return aa < bb? -1: (aa > bb? 1: 0); }); /* list.reverse(); */ for(var i=0; i<list.length; i++){ console.log(list[i].innerHTML); container.insertBefore(list[i], container.firstChild); }

 <ul id = "mylist"> <li> <a href="#">10-10-2019</a></li> <li> <a href="#">11-10-2019</a></li> <li> <a href="#">5-10-2019</a></li> </ul>