javascript - 上の項目または下の項目を

Question

の下にのように私がしようとしているものの非常に単純な例。項目を上に移動するにはリンク/ボタンを、上に移動するには右にリンク/ボタンを押します。しかし、それは動作していない、と私はエラーを取得しています：この行で

Object doesnt support this property or method

：ここ

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

例イメージ

は私のコードです：

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

あなたは、あなたが期待する数値のためのいかなる保証を持っていないことを意味しfor-in文を、使用しています。

代わりforステートメントを使用します。

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

また、DOMであなたが行った変更がリストに反映されるようitemsは、「ライブリスト」で、リスト自体は不変であることに留意してくださいこれは配列ではないためです。

要素を1つ前のインデックスに戻したい場合は、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要素であると期待どおり動作しませんし、IDにそれを比較するためにあなたがする必要があるでしょう：

if(item.id == id){ 

を今、具体的にあなたの質問カウンターへ== 0 item [counter-1]は配列の境界から外れて存在しません。