Javascript - arrange list item up or down

Question

A very simple example of what I'm trying to do below . link / button on the left to move the item up, link / button on the right to move the item down. But it does not work, and I get an error message:

The object does not support this property or method.

in this line:

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

Image example

here is my code:

JavaScript:

<script type="text/javascript">

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;
    }

}

</script>

Html:

<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

You are using an operator for-in, which means that you have no guarantee what kind of numerical order you can expect.

Use the statement instead 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){

, == 0, [counter-1] .