如何獲取動態生成的DOM對象中的元素數

Question

表單中我有一個部分允許用戶創建一個搜索查詢。在選項中，用戶可以選擇不同的操作符（包含，不包含，像之間）。

當用戶選擇與我的下拉菜單後插入一個新的輸入字段這將服務器作爲從現場看到的圖像：

我遇到的問題是我如何爲生存測試領域的。目前我正在根據對象的價值來做這件事。如果該字段最初未設置爲之間，則此方法不起作用。 I.E如果它包含，我選擇像字段被刪除。

我想我需要計算當前div中的文本輸入字段的數量，然後如果數字大於2，則刪除一個，否則不執行任何操作。

我在哪裏卡住在計數輸入元素當前DIV

我已經試過的能力：

var cnt = $(this, 'div .operClass input:text').length; 

但這計數的形式VS當前行的所有輸入。

任何人都可以在正確的方向指向我何時選擇一個選項來計數並返回選擇器所在的當前div的輸入字段數？

由於提前，

的JScript

$(document).ready(function() { 
      $('#add').click(function() { 
       InsertFields(); 
      }); 
      //insert first row 
      function InsertFields() { 
       $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
      } 
      //add additional row 
      //used second funciton to reset bindings 
      $('#newAdd').live('click', function() { 
       $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator' class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields'); 
      }); 
      //remove row 
      $('#btnRemove').live('click', function() { 
       $(this).parent().remove(); 
      }); 

      $('.operClass').change(function() { 
       var foo = $('.operClass option:selected').val(); 
       alert(foo); 
      }); 

      $('select').live('change', '.operClass', function() { 
       var sb = $(this, '.operClass option:selected').val(); 
       var ci = $(this, '.operClass'); 
       insertFromField(sb, ci); 
      }); 
      //insert field after between option or remove it if it exists 
      function insertFromField(param1, param2, param3) { 

       if (param1 == "BETWEEN") { 
        $("<input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' />").insertAfter(param2);  
       } 
       else { 
       //need to test count of existing input fields for the current row here if n > 1 remove the second field else do nothing. 
        $(param2).next().remove(); 
       } 
      } 
     }); 

HTML

<div id="queryFields"> 
      <select name="condition"> 
       <option value="AND">AND</option> 
       <option value="OR">OR</option> 
      </select> 
      <input type="text" name="fieldname" id="fieldName" size="20" /> 
      <select name="operator"> 
       <option id="opt1" value="CONTAINS">Contains</option> 
       <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option> 
       <option id="opt3" value="LIKE">Like</option> 
       <option id="opt4" value="BETWEEN">Between</option> 
      </select> 
      <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" /> 
      <input type="button" id="add" value="Add" /> 
     </div> 

Answer 1

你可以這樣做需要這種

var $selector = $(this); /* Assuming the selector is `this` */ 
var count = $selector.siblings("input:text").length; 

沒有額外的課程。

如果你只是想後選擇匹配的文本輸入，您可以使用：

$selector.nextAll("input:text").length; 

這將不匹配的第一個文本輸入的每個選擇之前。

Answer 2

添加類的輸入字段根據行號，然後用

基本上添加一個類號在這裏，併爲每個新行增加它。

<div id="queryFields" class="row-1"> 
<select name="condition"> 
<option value="AND">AND</option> 
<option value="OR">OR</option> 
</select> 
<input type="text" class="classname" name="fieldname" id="fieldName" size="20" /> 
<select name="operator"> 
<option id="opt1" value="CONTAINS">Contains</option> 
<option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option> 
<option id="opt3" value="LIKE">Like</option> 
<option id="opt4" value="BETWEEN">Between</option> 
</select> 
<input type="text" class="classname" name="fieldValue1" id="fieldvalue1" value="" size="20" /> 
<input type="button" id="add" value="Add" /> 
</div> 

jQuery的

var cnt = $('div .operClass .row-1 input.classname').length; 

這會給你此行中算2。