動的に作成されたdivをカウントする方法

Question

ユーザーがサインアップフォームを生成できるフォームビルダを作成しようとしています。ユーザーが作成できるアイテムの量を制限する必要がありますが、アイテムを削除する必要もあります。

は、もともと私は、ユーザーがアイテムを削除する場合しかしながら、カウンタが同じままので、彼らは新しいアイテムに削除されたフォーム要素を置き換えるcouldntの

var limit = 5; 
var counter = 0; 

if (counter == limit) { 

を持っていました。だから私がやりたいことは、現在アクティブなアイテムの数を数えることです。私は、新しい各要素にクラス（.kid）を与え、そのクラスでdivsの量を数えることでこれを実行しようとしましたが、それは動作しませんでした。

誰かが正しい方向に向いていますか？これはこれまで私が行ってきたことですが、うまくいきません。

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'); 

乾杯！

Answer 1

現在のカウンタをクロージャでキャプチャする必要があります。項目が作成された後、ユーザーが項目を削除して増加させると、カウンターが減少します。あなたのコードサンプルは、削除を処理する方法を明らかにしないが、私は小さなコードスニペットで何を意味するかを説明しようとするでしょう：

$(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 */ 
} 

Answer 2

このようなアプローチは動作しません何らかの理由はありますか？新しい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から削除されたアイテムを削除するか、別のクラスまたは属性を持つアクティブなアイテムからそれらを区別していると仮定しています。さもなければ、私が提案したアプローチは、削除されたアイテムも含むカウントを返します。

Answer 3

唯一の実際の問題は、num変数が関数の外で定義されていることです。ページがロードされて更新されないときに、.kid要素の数が取得されます。単純に関数内の行を移動：

var limit = 6; 

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

Answer 4

は

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); 
} 

これを試してみてください