Javascript：按時間順序對用戶輸入進行排序

希望我沒有想到這一點。我應該如何按照時間順序對用戶輸入進行排序，最舊的電影將在第一個排序列表中顯示？Javascript：按時間順序對用戶輸入進行排序

例如：

1980 - 帝國反擊
1996年 - 獨立日
1997年 - 泰坦尼克號

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 

<body> 

    <form> 
     Year: <br> 
     <input id="year" type="text"><br> 
     Movie:<br> 
     <input id="mName" name="MovieName" type="text"><br> 
    </form> 
    <br> 
    <button onclick="myFunction(list)" type="submit">Submit</button> 

    <div id="container"> 
     <ul id="list"> 
     </ul> 
    </div> 
    <script src="assets/js/main.js"> 

    </script> 
</body> 
</html>

function myFunction(list){ 
    var text = ""; 
    var inputs = document.querySelectorAll("input[type=text]"); 
    for (var i = 0; i < inputs.length; i++) { 
     text += inputs[i].value; 
    } 


    var li = document.createElement("li"); 
    var node = document.createTextNode(text); 
    li.appendChild(node); 
    document.getElementById("list").appendChild(li); 
}

來源

2016-06-27 Stevenson

你不要有任何陣列則u做soting becz在你的html中只有as一個HTML –

在每次插入li元素後更新DOM。

除了插入year和name爲純文本的，敷在span使用DOM-api(querySelector/All)
使用Array.from創建新Array instance從array-like或iterable object
排序是訪問採用Array#sort
追加sorted陣列到parent UL元素Array#forEach環

function myFunction(list) { 
 
    var text = ""; 
 
    var inputs = document.querySelectorAll("input[type=text]"); 
 
    for (var i = 0; i < inputs.length; i++) { 
 
    text += '<span>' + inputs[i].value + '</span>'; 
 
    } 
 
    var li = document.createElement("li"); 
 
    li.innerHTML = text; 
 
    document.getElementById("list").appendChild(li); 
 
    var liElemens = document.querySelectorAll('#container #list li'); 
 
    liElemens = Array.from(liElemens); 
 
    liElemens.sort(function(a, b) { 
 
    var aSpan = +a.children[0].textContent; 
 
    var bSpan = +b.children[0].textContent; 
 
    return aSpan > bSpan; 
 
    }); 
 
    var parent = document.querySelector('#list'); 
 
    while (parent.hasChildNodes()) { 
 
    parent.removeChild(parent.firstChild); 
 
    } 
 
    liElemens.forEach(function(elem) { 
 
    parent.appendChild(elem); 
 
    }); 
 
}

<form> 
 
    Year: 
 
    <br> 
 
    <input id="year" type="text"> 
 
    <br>Movie: 
 
    <br> 
 
    <input id="mName" name="MovieName" type="text"> 
 
    <br> 
 
</form> 
 
<br> 
 
<button onclick="myFunction(list)" type="submit">Submit</button> 
 

 
<div id="container"> 
 
    <ul id="list"> 
 
    </ul> 
 
</div>

來源

2016-06-27 03:08:36 Rayon

這是一個更好的答案，然後我給你。做得很好。 –

計數排序會這裏好這一年的大部分時間範圍從1900年到2016年（如果你不希望你的代碼在任何即將到來的一年中破產，那就把它變成2100）。它可以在O（n）時間排序。

Google Counting sort。你會發現各種實現。

來源

2016-06-27 02:55:05

我是JavaScript庫UnderscoreJS的忠實粉絲。

這很可能是我會使用的方法。我很可能會在對象中訂購我的JavaScript，然後對該對象中的項目進行排序。 Here is a great blog article它談論它的一切。

當然，你可以用簡單的數組來做到這一點，但爲什麼不使用JavaScript的全部對象字面值功能呢？

下面是有關如何使用下劃線進行排序的例子：

let list = [ 
 
    {year: "2004", title: "Superman IV"}, 
 
    {year: "1974", title: "Superman"}, 
 
    {year: "1994", title: "MythBusters"}, 
 
    {year: "1984", title: "Ghostbusters"}, 
 
]; 
 

 
console.log("Unsorted List"); 
 
console.log(list); 
 

 
// First by Title, then by Year 
 
let sorted = _.sortBy(list, 'year'); 
 

 
console.log("Sorted List"); 
 
console.log(sorted);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

來源

2016-06-27 02:57:08

您需要實現您的列表中已經元素的數據結構。然後，您需要評估列表中現存的元素以確定插入新元素的位置。

一個想法是在內部使用數組來保存列表的條目。另一個想法是依次檢查li它們包含的年份的DOM元素。

如果您選擇實際使用本地li DOM元素作爲主數據結構，則可能需要查找要使用的排序算法。

使用內置數組的優點是，您可以使用瀏覽器的本機排序功能，這可能比天真的線性搜索方法更有效。然而，除非你有一個非常大的名單，否則這種差異可能不會被注意到。

來源

2016-06-27 02:57:17 MjrKusanagi

var arraylist = []; 

function myFunction(list) { 
    var year = document.getElementById("year").value; 
    var mName = document.getElementById("mName").value; 
    var obj = {}; 
    obj.year = parseInt(year); 
    obj.mName = mName; 
    arraylist.push(obj); 
    var sortedAsc = _.sortBy(arraylist, 'year'); 
    $('#list').empty(); 
    for (var i = 0; i < sortedAsc.length; i++) { 
    console.log('-----------') 
    var li = document.createElement("li"); 
    var node = document.createTextNode(sortedAsc[i].year + " " + sortedAsc[i].mName); 
    li.appendChild(node); 
    document.getElementById("list").appendChild(li); 
    } 
}

參考https://plnkr.co/edit/mi3rtENJWQlzipfsO6Ur?p=preview

來源

2016-06-27 03:14:25

什麼是完全隨機縮進？有了現代編輯，你幾乎不得不走出自己的方式來做到這一點。 –

抱歉，你的意思是@EvanTrimboli –

@gayathri，Evan正在談論代碼格式化..我爲你做了這件事;） – Rayon

Javascript：按時間順序對用戶輸入進行排序

回答

相關問題