javascript - 如何从类名中获取动态ID？

Question

我正在使用 jquery 创建动态行。现在每一行都有不同的 ID 和公共(public)类名。如何从同一个类名中获取不同的 id？

/image/zuCMv.jpg

见上图。当我选择一个选项时，我需要 ID 名称。

我的尝试:

HTML:

<tbody id="dynamic_row">
          <tr id="firstTR">

            <td>

              <select name="product_id[]" class="invoiceProducts">
                  @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->productName }}</option>
                  @endforeach
              </select>

            </td>
            <td>
              <input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
            </td>
            <td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
            <td><input type="number" class="form-control" name="itemQuantity[]"></td>

            <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>

          </tr>

        </tbody>

$('#add').click(function(){  
   i++;
   j=i;

   console.log("Inside: " + i);

   var html = '<tr id="row'+i+'" class="dynamic-added">';
   html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">@foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>@endforeach</select></td>';
   html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
   html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';

   let tb = $("table.invoice-table").find("tbody");
   tb.append(html);
   tb.find('tr').last().trigger('select-added');
});  


$('body').on('change', '.invoiceProducts', function() {
  var idOfSelect = $('.invoiceProducts').attr('id');
  console.log("Select ID: " + idOfSelect);
});

输出:

Select ID: undefined

Answer 1

您可以在更改事件中使用 this.closest('tr').id 查找 id

var i =0;
$('#add').click(function(){  
   i++;
   j=i;
   console.log("Inside: " + i);
   var html = '<tr id="row'+i+'" class="dynamic-added">';
   html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">@foreach($products as $product)<option value="1">1</option><option value="2">2</option>@endforeach</select></td>';
   html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
   html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';

   let tb = $("table.invoice-table").find("tbody");
   tb.append(html);
   tb.find('tr').last().trigger('select-added');
});  


$('body').on('change', '.invoiceProducts', function() {

  var idOfSelect = this.closest('tr').id
  console.log("Select ID: " + idOfSelect);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
  <tbody id="dynamic_row">
    <tr id="firstTR">
      <td>
        <select name="product_id[]" class="invoiceProducts">
           <option value="1">1</option>
           <option value="1">2</option>
           <option value="1">3</option>
           <option value="1">4</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
      </td>
      <td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
      <td><input type="number" class="form-control" name="itemQuantity[]"></td>
      <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
  </tbody>
</table>