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块。

点击按钮，我.each从每个块的#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());
    }); 
});

在点击结果中，我只从第一个输入（在代码中手动写入）接收有效值。来自其他人我只得到 - ＆＃34;被识别＆＃34;。

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

Answer 1

您可以使用jQuery find函数查找each回调中的$("#btn-save").click(function() { $( ".canvas .u-form-group" ).each(function() { var nativeWord = $(this).find("input#native_word"); console.log(nativeWord.val()); }); });输入，然后使用.val()访问该值：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

你不应该复制ID。尝试使用类，它可以工作。

$("#btn-save").click(function() {
  $(".canvas .u-form-group").each(function() {
    alert($(this).find('.niceinput-native').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" class="niceinput-native" />
    <input type="text" placeholder="Translation" name="learn_word" class="niceinput-translation" />
  </div>
  <div class="u-form-group" id="2" style="margin-top:50px;">
    <input type="text" placeholder="Word in Native Language" name="native_word" class="niceinput-native" />
    <input type="text" placeholder="Translation" name="learn_word" class="niceinput-translation" />
  </div>
</div>
<button id="btn-save">Save</button>

关于动态数据问题的Jquery .each（）

2 个答案: