javascript - 怎么算没有。 jQuery 表单上存在的选择 HTML 元素的数量？

Question

我有一个表格的 HTML:

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th style="vertical-align:middle">Products</th>
          <th style="vertical-align:middle">Pack Of</th>
          <th style="vertical-align:middle">Quantity</th>
          <th style="vertical-align:middle">Volume</th>
          <th style="vertical-align:middle">Unit</th>
          <th style="vertical-align:middle">Rebate Amount</th>
        </tr>
      </thead>
      <tbody class="apnd-test">
        <tr id="reb1_1">
          <td>
            <div class="btn-group">
              <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
                <option value=""  selected='selected'>Select Product</option>
              </select>
            </div>
          </td>
          <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
          <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
          <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
          <td>
            <div class="btn-group">
              <select name="units[1]" id="units_1" class="form-control">
                <option value=""  selected='selected'>Select Unit</option>
                <option value="5" >Microsecond</option>
                <option value="7" >oz</option>
                <option value="9" >ml</option>
                <option value="10" >L</option>
                <option value="12" >gms</option>
              </select>
            </div>
          </td>
          <td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
        </tr>
      </tbody>
      <tfoot>
        <tr id="reb1_2">
          <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
          <td colspan="5"></td>                            
        </tr>
      </tfoot>                                           
    </table>

我想数数。存在于该特定表 id 中的 select 仅具有类 prod_list 的 .controls 并向其添加 1。现在只有一个这样的选择元素存在，但它可以增加。所以我应该得到更新的计数。我尝试了以下代码，但它总是给我 1。

$(function () {
$(document).delegate('.products','click',function (e) {
var n = $('select .prod_list ').length  + 1;
});  
});

我哪里出错了？

Answer 1

您在 select 和类选择器中有空间，它尝试在 select 元素中查找 .prod_list 子元素。您应该使用:

 $('select.prod_list').length  + 1;

更新:通过单击的元素父(最接近的父)表获取选择。

 $(this).closest('table').find('select.prod_list').length+1;