使用循环移动列表中的选中项目

Question

我有两个无序列表，列表项里面有复选框。我想一次将一侧的所有检查项目移到另一侧。目前它一次只能移动一个，或者偶尔一次移动两个，并给我错误。我认为我的循环有问题？

http://jsfiddle.net/XJ82y/

<form action="" method="get" name="formName">

<div class="list" id="select1_wrapper">

<ul id="select1">
<li><label>
  <input type="checkbox" value="checkbox" id="CheckboxGroup1_0" class="movethis" />
  <span>Lime</span></label>        
  </li>
</ul>
</div>

 <div class="middle_column_options" style="float:left; width: 60px; padding-top:10px;">
 <a href="#" id="add" onclick="javascript:moveRight(); return false;">Move items to the right</a>
 <hr />
 <a href="#" id="remove" onclick="javascript:moveLeft(); return false;">Move items to the left</a>
 </div>

<div class="list" id="select2_wrapper">

<ul id="select2">
<li><label>
  <input type="checkbox" value="checkbox" id="CheckboxGroup2_0" class="movethis" />
  <span>Banana</span></label>
      </li>
<li><label> 
  <input type="checkbox" value="checkbox" id="CheckboxGroup2_1" class="movethis" />
  <span>Pear</span></label>
      </li>
</ul>
</div>
</form>

javascript：

//move function
function moveLeft () {
    var selectlist = document.getElementById('select2');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length; //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
      var subcheck = hom[i].getElementsByTagName('input')[0];

      if (subcheck.checked) {
        document.getElementById('select1').appendChild(hom[i]);
    } 


    };
};

function moveRight () {
    var selectlist = document.getElementById('select1');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length; //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
      var subcheck = hom[i].getElementsByTagName('input')[0];

      if (subcheck.checked) {
        document.getElementById('select2').appendChild(hom[i]);
    } 


    };
};

请没有 jquery 答案！正在寻找纯 JavaScript 的解决方案。

Answer 1

正如 Evan 所说，您在迭代列表时正在修改列表。如果您单独构建列表，然后对其进行迭代（因为移动元素时它不会缩小）它将起作用。一个简单的例子：

//move function
function moveLeft () {
    var selectlist = document.getElementById('select2');
    var hom = selectlist.getElementsByTagName("li");
    var homs = selectlist.getElementsByTagName("li").length;
    var toMove = [];
    //count the number of list items and set as homs
    for (var i=0;i<homs;i++){
        var subcheck = hom[i].getElementsByTagName('input')[0];
    if (subcheck.checked) {
           toMove.push(hom[i]);     
        }
    };
    for (var i = 0; i < toMove.length; i++) {
      document.getElementById('select1').appendChild(toMove[i]);
    }
};