сортировать неупорядоченный список кнопок по list.id - PullRequest
Новая
       2

сортировать неупорядоченный список кнопок по list.id

0 голосов
/ 06 февраля 2012

Моя программа html5, css, javascript будет дневным календарем.Нажатие на кнопку события отобразит детали этого события.Прямо сейчас у меня есть несколько дней событий в порядке их ввода.Я застрял, пытаясь отсортировать неупорядоченный список кнопок на основе их идентификатора.Здесь вы можете увидеть, как создается каждая кнопка 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-button3- [delete]

Когда я преобразую список в массив, он удаляет кнопку и сохраняет только два значения 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;
}

1 Ответ

0 голосов
/ 06 февраля 2012

1.) Поскольку li s (которые должны быть отсортированы) имеют под li s, будет лучше выбрать их по классу (который доступен с 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 );
}

Также см. пример .

...