如何計算動態創建的div

我正試圖編寫一個表單生成器，用戶可以在其中生成註冊表單。我需要限制用戶可以創建的項目數量，但他們也需要刪除項目。如何計算動態創建的div

我原本

var limit = 5; 
var counter = 0; 

if (counter == limit) {

然而，當用戶刪除郵件的櫃檯仍然是相同的，所以他們不可能有新項目替換刪除的表單元素。所以我想要做的是計算當前有多少項目是活動的。我試圖通過給每個新元素一個類（.kid），然後計算該類的div的數量，但它沒有工作。

任何人都可以指向正確的方向嗎？這是我迄今爲止所做的，但它不起作用。

var limit = 6; 
var num = $('.kid').length; 

    function addAllInputs(divName, inputType){ 

    if (num == limit) { 
     alert("You have all ready added 6 form items"); 
    } 
    else { 
    var newdiv = document.createElement('div'); 
     newdiv.setAttribute('id', 'child' + (counter + 1)); 
     newdiv.setAttribute('class', 'kid');

乾杯！

來源

2011-07-22 Chris

您需要在閉包中捕獲當前計數器。當用戶刪除一個項目並在創建項目後增加它時減少計數器。您的代碼示例沒有透露如何處理刪除，但我會盡量說明我的意思了一小段代碼：

$(document).ready(function() { 
    var limit = 5; 
    var counter = $('.kid').length; 

    $('#triggers_delete').click(function() { 
     /* delete the item */ 
     counter--; 
    }); 

    $('#triggers_creation').click(function() { 
     if (counter == limit) { 
      alert('Limit reached'); 
      return false; 
     } 
     /* somehow determine divName and inputType 
      and create the element */  
     addAllInputs(divName, inputType); 
     counter++; 
    }); 
}); 

function addAllInputs(divName, inputType) { 
    /* just create the item here */ 
}

來源

2011-07-22 23:29:57 emboss

有什麼理由這樣的做法是行不通的？每次您添加新的DIV時，都會檢查當前收集的長度，以確定它是否達到或超過限制。當然，如果可能存在具有相同類ID的表單的其他DIVs，則可能需要優化選擇器的範圍。

var limit = 6; 

    function addAllInputs(divName, inputType){ 

    if ($('.kid').length >= limit) { 
     alert("You have all ready added 6 form items"); 
    } 
    else { 
     var newdiv = document.createElement('div'); 
     newdiv.setAttribute('id', 'child' + (counter + 1)); 
     newdiv.setAttribute('class', 'kid'); 
    }

編輯：剛一說明，我假設你要麼從DOM刪除已刪除的郵件，或是用不同的類或屬性有效的項目區分它們。否則，我建議的方法將返回包含已刪除項目的計數。

來源

2011-07-22 23:34:48

唯一真正的問題是您的num變量被定義在函數之外。它將在頁面加載時得到.kid元素的數量，並且不會更新。只需將這一行裏面的功能：

var limit = 6; 

    function addAllInputs(divName, inputType){ 
     var num = $('.kid').length; 
     ...

來源

2011-07-22 23:43:14

試試這個

var limit = 6; 

function addAllInputs(divName, inputType){ 

    if ($('.kid').length == limit) { 
     alert("You have all ready added 6 form items"); 
    } 
    else { 
    var newdiv = $('div', { 'id': 'child' + (counter + 1), 'class': 'kid' }); 
    $("inputContainerSelector").append(newdiv); 
}

來源

2011-07-22 23:46:54 ShankarSangoli

如何計算動態創建的div

回答

相關問題