無法在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中循環迭代

回答

相關問題