怎么算不。 jQuery中表单上存在的选择HTML元素?

时间:2014-05-12 12:02:12

标签: javascript jquery html

我跟随表格的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>

我想算不上。 select特定表中的select id仅限.controls与类prod_list并添加1。现在只有一个这样的选择元素存在但可以增加。所以我应该得到更新的计数。我尝试了以下代码,但它始终给我1个。

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

我哪里出错?

1 个答案:

答案 0 :(得分:3)

select和class选择器中有空格,它试图在select元素中查找.prod_list子元素。你应该使用:

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

更新:选择点击元素为父(最近父级)表。

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