list.idでボタンの並べ替えられていないリストをソート

Question

私のhtml5、CSS、javascriptプログラムは日カレンダーになります。イベントのボタンをクリックすると、そのイベントの詳細が表示されます。今、私は入力された順序で数日間のイベントがあります。私は自分のIDに基づいてボタンの順序のないリストをソートしようとしています。各ulボタンの作成方法を見ることができます。値はindexedDBから来ます。

function renderTodo(row) { 
    var todos = document.getElementById("todoItems"); 
    var li1 = document.createElement("li"); 
    var name = document.createTextNode(row.name); 
    var li2 = document.createElement("li"); 
    var time = document.createTextNode(row.time); 
    var btn = document.createElement("BUTTON") 
    var a = document.createElement("a"); 
    var li = document.createElement("li"); 

    a.addEventListener("click", function() { 
     helicopter.indexedDB.deleteEvent(row.timeStamp); 
    }, false); 

    a.textContent = " [Delete]"; 
    li1.appendChild(name); 
    li2.appendChild(time); 
    btn.onclick=viewEvent; 
    btn.id=row.parent; 
    btn.row = row; 
    btn.appendChild(li1); 
    btn.appendChild(li2); 
    li.appendChild(btn); 
    li.appendChild(a); 
    li.id = row.time; 
    todos.appendChild(li) 
    sortUnorderedList(todos); 
    } 

つまり、完成品は次のようになります。
UL-button2-
UL-button1-を[削除] [削除]
UL-button3-は、私は配列にリストを変換すると、それがボタンをドロップし、2個のだけのLiを保つ

を[削除します]値。私はいくつかのことを成功させるために試しました（下記参照）。私はボタンのアイデアを落として、同じ外観を与えるためにCSSを使うか、ボタンを並べ替えるのが良い方法でしょうか？

function sortUnorderedList(ul) { 
     //if(typeof ul == "string") 
     //ul = document.getElementById(ul); 

     // Idiot-proof, remove if you want 
     if(!ul) { 
     alert("The UL object is null!"); 
     return; 
     } 

     // Get the list items and setup an array for sorting 
     var lis = ul.getElementsByTagName("LI"); 
     var ali = Array.lis; 
     ali.sort(liSort); 
     ul.innerHTML = ""; 

     // Populate the array 
     for(var i = 0, j = lis.length; i < 2; i++) 
     ul.appendChild(ali[i]); 

     // Sort it 
     //vals.sort(liSort); 
     //vals.reverse(); 

     // Change the list on the page 
     //for(var i = 0, l = lis.length; i < l; i++) 
     //lis[i].innerHTML = vals[i]; 
    } 
function liSort(one, two) { 
    //alert(one.id + " - " two.id); 
    return one.id - two.id; 
} 

Answer 1

1）ソートされなければならないli sが（）サブli秒を持っているので、HTML5で利用可能であるクラス（でそれらを選択する方がよいでしょう）。そうli.id = row.time;後に次の行を持つクラスを追加します。

li.className = 'sortLi'; 

2）機能ではそれらを選択し、配列にリストを変換します。

var lis = ul.getElementsByClassName("sortLi"); 
var ali = Array.prototype.slice.call(lis); 

3）ソート順にここでそれらを追加します。

ali.sort(liSort); 
for (var i = 0; i < ali.length; i++) { 
    ul.appendChild(ali[i]); 
} 

4）ソート機能：

function liSort(one, two) { 
    return one.id < two.id ? -1 : (one.id > two.id ? 1 : 0); 
} 

an exampleも参照してください。