Jquery .each() 关于动态数据问题

Question

我有html输入，用户可以在其中输入任何文本。此外，用户还可以添加更多输入并插入任何文本:

 <div class="u-form-group" id="1" style="margin-top:50px;">
    <input type="text" placeholder="Word in Native Language" name="native_word" id="native_word" class="niceinput" />
    <input type="text" placeholder="Translation" name="learn_word" id="learn_word" class="niceinput" />
 </div>

想象一下还有几个类似的 .u-form-group block 。

单击按钮时，我有 .each，它从每个 block 的 #native_word 收集值。

$("#btn-save").click(function() {
    $( ".canvas .u-form-group" ).each(function() {
        var id_div = ".u-form-group#"+$(this).attr('id')+" #native_word";
        alert($(''+id_div).val());
    }); 
});

在单击结果中，我仅从第一个输入(在代码中手动编写)收到有效值。从其他人那里我只得到 - “身份不明”。

如何使其正常工作并从动态加载的输入中收集值？

Answer 1

您可以使用 jQuery find函数在 each 回调中查找 native_word 输入，然后使用 .val() 访问该值:

$("#btn-save").click(function() {
  $( ".canvas .u-form-group" ).each(function() {
    var nativeWord = $(this).find("input#native_word");
    console.log(nativeWord.val());
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
  <div class="u-form-group" id = "1" style = "margin-top:50px;">
    <input type="text" placeholder="Word in Native Language" name="native_word" id="native_word" class="niceinput" />
    <input type="text" placeholder="Translation" name="learn_word" id="learn_word" class="niceinput" />
  </div>
  <div class="u-form-group" id = "2" style = "margin-top:50px;">
    <input type="text" placeholder="Word in Native Language" name="native_word" id="native_word" class="niceinput" />
    <input type="text" placeholder="Translation" name="learn_word" id="learn_word" class="niceinput" />
  </div>
</div>
<button id="btn-save">Save</button>