javascript - 在几个相似的 div 中调用该 div 内的函数时访问 div 内的元素

Question

我正在制作以下表格:

首先，用户点击“ADD ANOTHER CATEGORY”，这会复制从类别名称到最后一个添加更多按钮的所有内容。假设我们单击了一次按钮，那么现在我们有两个类别 block 。现在用户可以在两个 block 中输入详细信息。单击“添加更多”按钮时，表格应显示另一行该类别 block 中的项目、数量和价格输入。它仅适用于第一个类别 block 。

对于第二个类别 block ，如果我在其中单击“添加更多”，那么它不会增加第二个类别 block 的项目、数量和价格输入，而是总是为第一个类别 block 增加它。

以下是我的html代码:

<div class="row">
  <div class="input-field col s12">
      <label>Menu</label>
      <br><br>
  </div>
  <div class="col s12" id="category">
      <div class="row" id="categoryContent">
          <div class="col s12">
              <h6>Categry name: </h6>
              <input type="text" name="category[]">
          </div>
          <div class="col s12"><h6>Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="veg">
                      <tr id="vegContent">
                          <td>
                              <input type="text" name="vitem[][]">
                          </td>
                          <td>
                              <input type="text" name="vquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="vprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addVeg()" type="button">Add More</button>
          </div>
          <div class="col s12"><h6>Non-Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="nonVeg">
                      <tr id="nonVegContent">
                          <td>
                              <input type="text" name="nitem[][]">
                          </td>
                          <td>
                              <input type="text" name="nquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="nprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addNonVeg()" type="button">
                  Add More
              </button>
          </div>
      </div>
  </div>
  <div class="col s12" style="text-align: center">
      <button class="btn waves-effect waves-light" onclick="addCategory()" type="button">
          Add Another Category
      </button>
  </div>
</div>

这是我的js代码:

function addCategory(){
    $("#category").append($("#categoryContent").clone());
}

function addVeg(){
    $("#veg").append($("#vegContent").clone());
};

function addNonVeg(){
    $("#nonVeg").append($("#nonVegContent").clone());
};

我希望在单击“添加更多”按钮时仅增加该 block 内的输入行。

Answer 1

您可以通过公共(public)类访问元素(您可以为每个元素添加类)，如

<input type="text" name="nitem[][]" class="itemname">

以便您可以按如下方式访问它:

$('.itemname').each(function() {
    var currentElement = $(this);
    var value = currentElement.val(); 
});

或

您可以按如下方式为每个元素添加不同的值:

<input type="text" name="nitem[][]" id="Item1">
<input type="text" name="nitem[][]" id="Item2">

您可以访问它。

$('#Item1').val();