Jquery行中的每个循环都不起作用

Jquery each loop in rows not working

本文关键字：循环 不起作用 Jquery      更新时间：2023-09-26

我想在单击按钮时获得每个值。我错过了什么？

//add row
$("#btnAdd").click(function(){
    $(".oItem:last").clone().insertAfter(".oItem:last");                                
});
//submit
$("#btnCalc").click(function(){
  $("[id^=txtItemName]").each(function(){
    alert($("#txtItemName").val());
  });                       
});

我的小提琴在这儿https://jsfiddle.net/k5ndm840/3/

感谢

您对添加的每个新字段使用相同的ID。您应该使用class而不是id，因为id必须是唯一的。

使用$(this).val();，因为您将在每次迭代中获得this=>current元素。在each回调中，this指的是element

$("#txtItemName")将始终选择具有id的第一个元素作为txtItemName

试试这个：

$("#btnAdd").click(function() {
  $(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
  $("[id^=txtItemName]").each(function() {
    alert($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
  <div class="row oItem">
    <div class="col-md-4">
      <div class="form-group">
        <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
          <input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
        </div>
      </div>
    </div>
  </div>
</div>

Fiddle here

编辑：根据www标准，文档中不能有多个元素具有相同的id值[Ref]。在处理attribute选择器时，您没有遇到任何问题，但ID必须是唯一的

编辑：要在父元素下查找另一个子元素，请使用.closest()查找parent element，并使用.find()选择父元素的子元素。

试试这个：

$("#btnAdd").click(function() {
  $(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
  $("[id^=txtItemName]").each(function() {
    alert($(this).val());
    alert($(this).closest(".form-group").find('[id=txtTwo]').val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
  <div class="row oItem">
    <div class="col-md-4">
      <div class="form-group">
        <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
          <input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
          <input id="txtTwo" placeholder="second input">
        </div>
      </div>
    </div>
  </div>
</div>

当您尝试访问id为的元素时，它总是会给出与选择器条件匹配的第一个元素。

$("#txtItemName").val()

这将始终给出第一个匹配元素的值。试着这样做。

//submit
$("#btnCalc").click(function(){
    $("[id^=txtItemName]").each(function(){
        console.log($(this).val());
    });                       
});
相关文章：