Сортировать элемент списка вверх или вниз

Question

Очень простой пример того, что я пытаюсь сделать ниже. Ссылка / кнопка слева для перемещения элемента вверх, ссылка / кнопка справа для перемещения элемента вниз. Но это не работает, и я получаю сообщение об ошибке:

Объект не поддерживает это свойство или метод

в этой строке:

items[counter-1] = curr;// move
previous item, to current

Пример изображения:

Вот мой код:

function MoveItem(id, direction) {
  var ul = document.getElementById('GroupBy');
  var items = ul.getElementsByTagName('li');

  var counter = 0;
  var previousItem = null;
  var moveNextItemUp = false;

  for (var item in items) {

    //if current item, is the one to be moved
    if (item == id) {
      if (direction == 1) { // item move down
        moveNextItemUp = true;
      } else if ((direction == -1) || (moveNextItemUp == true)) { // item move up
        var curr = items[counter];
        var prev = items[counter - 1];

        items[counter - 1] = curr; // move previous item, to current
        items[counter] = prev; //move current item, to previous

        break;
      }
    }

    previousItem = item;
    counter = counter + 1;
  }

}

<ul id="GroupBy">
  <li id="One">
    one<a href="#" onclick="MoveItem('One', 1)"> V </a>
  </li>
  <li id="Two">
    <a href="#" onclick="MoveItem('Two', -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
  </li>
  <li id="Three">
    <a href="#" onclick="MoveItem('Three', -1)"> ^ </a>three<a href="#" onclick="MoveItem('Three', 1)"> V </a>
  </li>
  <li id="Four">
    <a href="#" onclick="MoveItem('Four', -1)"> ^ </a>four
  </li>
</ul>

Answer 1

Вы используете оператор for-in, что означает, что у вас нет никаких гарантий относительно числового порядка, которого вы можете ожидать.

Вместо этого используйте оператор for:

for (var i = 0, len = items.length; i < len; i++) {

Кроме того, имейте в виду, что items является «живым списком», поэтому изменения, которые вы вносите в DOM, отражаются в списке, а сам список неизменяем, поскольку он не является массивом.

Если вы хотите сдвинуть элемент на один индекс назад, используйте insertBefore.

Примерно так:

items[i].parentNode.insertBefore( items[i],items[i-1] );

Пример: http://jsfiddle.net/d25a3/

function MoveItem(id, direction) {
    var ul = document.getElementById('GroupBy');
    var items = ul.getElementsByTagName('li');

    var counter = 0;
    var previousItem = null;
    var moveNextItemUp = false;

    for (var i = 0, len = items.length; i < len; i++) {
        var item = items[i];

        if (item.id == id) {
            if (direction == 1) { 
                moveNextItemUp = true;
            } else if ((direction == -1) || (moveNextItemUp == true)) {

                item.parentNode.insertBefore( item,items[i-1] );
                break;
            }
        }
        previousItem = item;
        counter = counter + 1;
    }
}

Кроме того, не уверен, каково полное намерение кода, но может показаться, что вы могли бы упростить что-то вроде этого:

Пример: http://jsfiddle.net/d25a3/1/

   <!-- pass the parent node of the item clicked as the first argument -->

<li id="Two">
    <a href="#" onclick="MoveItem(this.parentNode, -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
</li>

И полностью избавиться от цикла:

function MoveItem(item, direction) {

    var counter = 0;
    var previousItem = null;
    var moveNextItemUp = false;

    if (direction == 1) {
        moveNextItemUp = true;
    } else if ((direction == -1) || (moveNextItemUp == true)) {

           // get the previous <li> element
        var prev = item.previousSibling
        while( prev && prev.nodeType != 1 && (prev = prev.previousSibling));

        item.parentNode.insertBefore(item, prev);
    }
    previousItem = item;
    counter = counter + 1;
}

Answer 2

Чтобы фактически переместить элементы на странице, вам нужно удалить их из документа и заново вставить их в нужном порядке.Во-первых,

if (item == id) {

не будет работать так, как вы ожидаете, поскольку элемент является элементом DOM и для сравнения его с идентификатором, который вам нужно сделать:

if(item.id == id){

Теперь специальноВаш вопрос, когда counter == 0 item [counter-1] выйдет за пределы массива и не существует.