无法在jquery中循环迭代

我在我的html中有3个div元素，每个元素都有一个复选框。当我点击删除按钮时，带有复选框的div应该被删除。但是我发现，当我检查所有的复选框时，最后一个div仍未被删除。我确信最后一次迭代发生，因为我已经使用警报框进行了检查。然而，最后一次迭代神秘地停止在某个地方而不删除最后一个div。我的3格的类是“0”，“1”&“2”。以下是我的函数：无法在jquery中循环迭代

$("#delete").click(function(){ 
    checkboxes = document.getElementsByName('myCheckbox'); 
    for(var i=0, n=checkboxes.length;i<n;i++) { 
    if(checkboxes[i].checked==true){ 
     $("."+i).remove(); 
    } 
    } 
});

来源

2014-09-29 Adarsh Hegde

也发布您的HTML。 – AmanVirdi 2014-09-29 11:47:56

最简单的方法是做从结束循环，从而开始：

$("#delete").click(function(){ 
    checkboxes = document.getElementsByName('myCheckbox'); 
    for(var i = checkboxes.length - 1; i >= 0; i--) { 
     if(checkboxes[i].checked==true){ 
     $("."+i).remove(); 
    } 
    } 
});

工作FIDDLE here。

来源

2014-09-29 11:58:32

我已经成功，如果您将您的节点的实时收集到一个数组，然后确保你通过一个降低数组的长度每次你删除一个得到这个工作元素：

$("#delete").click(function() { 
    var checkboxes = [].slice.call(document.getElementsByName('myCheckbox'), 0); 
    for (var i = 0, n = checkboxes.length; i < n; i++) { 
    if (checkboxes[i].checked == true) { 
     $('.' + i).remove(); 
     n--; 
    } 
    } 
});

DEMO

来源

2014-09-29 11:48:23 Andy

的问题是，当你删除DIV在for循环节点数组中元素的数量也减少了，因此最后一个元素没有得到deleted.Here是一种方法，执行你在做什么

var arr = []; 
$("#delete").click(function(){ 
    checkboxes = document.getElementsByName('myCheckbox'); 
    for(var i=0, n=checkboxes.length;i<n;i++) { 
    if(checkboxes[i].checked==true){ 
     arr.push(i); 
    } 
    } 
    removeDiv(arr); 
}); 
function removeDiv(elems){ 
    for (var i = 0; i < elems.length; i++){ 
     $("."+i).remove(); 
    } 
}

编辑

这样，当我们在点击事件迭代，在可变checkboxes元素的数量保持same.Later我们删除所需once.You将需要修改代码根据你的neds var arr = [];没有重置，并将有i推入每次点击。

来源

2014-09-29 11:52:35

试试这个

 <html> 
     <head> 
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
     </head> 

      <body> 
         <div class="0"> 

          <input type="checkbox" name="checkbox" id="checkbox1" /> 

         </div> 

         <div class="1"> 

          <input type="checkbox" name="checkbox" id="checkbox2" /> 

         </div> 

         <div class="2"> 
          <input type="checkbox" name="checkbox" id="checkbox3" /> 
         </div> 

        <input type="button" id="delete" value="delete" /> 


       <script> 
          $("#delete").click(function(){ 
            $("div input").each(function(index, element) { 
              if(element.checked){ 
                 $(this).parent().remove() 
                   } 
             }) 
          }); 
       </script> 


      </body> 
      </html>

来源

2014-09-29 11:54:05

尽管这不是对您的问题的直接回答，但它确实解决了您选择的（感知到的）过于复杂的解决方案。我建议改为：

$("#delete").click(function(){ 
    $('input.myCheckbox').each(function (i) { 
     $('.' + i).remove(); 
    }); 
});

不过需要注意的是，至今，它可能会非常棘手有一个数字作为一个类名的第一个字符，并且可能需要一个转义序列：

$("#delete").click(function(){ 
    $('input.myCheckbox').each(function (i) { 
     $('.\3' + i).remove(); 
    }); 
});

参考文献：

“CSS Escapes”。
each()。

来源

2014-09-29 12:04:54

其实你发布的代码工作得很好，当我做了拨弄它，但我认为更好的办法是，而不是jQuery的使用，循环和放的div内输入，以提供上下文，所以你知道哪些div由哪个复选框删除。

缺失然后可以减少到一个班轮：

HTML：

<div class="deletable"> 
    0 
    <input name="deletediv" type="checkbox"></input> 
</div> 
<div class="deletable"> 
    1 
    <input name="deletediv" type="checkbox"></input> 
</div> 
<div class="deletable"> 
    2 
    <input name="deletediv" type="checkbox"></input> 
</div> 

<button id="delete">delete</button>

JS：

$("#delete").click(function(){ 
    $(".deletable input[name='deletediv']:checked").parent().remove(); 
});

fiddle

编辑：

如果您需要在将元素从dom中删除之前执行此操作，可以使用$ .each：

$("#delete").click(function(){ 
    $(".deletable input[name='deletediv']:checked").parent().each(function() { 
     console.log("$(this) is a div with a checked checkbox"); 
     $(this).remove(); 
    }); 
});

来源

2014-09-29 12:05:21 tonsteri

从数组末尾循环为我工作。谢谢你所有的答案。 – 2014-09-29 12:13:00

我仍然会推荐使用jQuery来处理这些事情，因为您已经在脚本中使用了它，它会简化很多事情 – tonsteri 2014-09-29 12:21:03

无法在jquery中循环迭代

回答

相关问题