jQuery 在.each循环中获取输入值

在本文中，我们将介绍如何使用jQuery在.each循环中获取输入值。循环是在处理表单元素时非常有用的操作，特别是当需要获取每个元素的值并进行相应的处理时。

阅读更多：jQuery 教程

使用.each循环遍历表单元素

在jQuery中，使用.each()方法可以循环遍历所有匹配的元素。当我们在表单中有多个输入元素时，可以使用.each循环遍历每个输入元素，并获取其值。以下是一个示例：

<form>
  <input type="text" class="input-field" value="Value 1" />
  <input type="text" class="input-field" value="Value 2" />
  <input type="text" class="input-field" value="Value 3" />
  <input type="button" id="get-values-button" value="获取值" />
</form>

<script>
  (document).ready(function() {('#get-values-button').click(function() {
      ('.input-field').each(function() {
        var value =(this).val();
        console.log(value);
      });
    });
  });
</script>

在上述示例中，我们有三个输入元素，并附加了相同的类名“input-field”。在jQuery代码中，我们使用.each循环遍历每个class为“input-field”的元素，并使用$(this)来引用当前正在处理的元素。通过使用.val()方法，我们可以获取当前输入元素的值，并打印到控制台中。

处理每个输入元素的值

在实际应用中，我们经常需要对每个输入元素的值进行处理。这些处理可能包括验证输入、计算或将值添加到列表等。以下是一个示例，演示如何在循环中处理每个输入元素的值：

<form>
  <input type="text" class="input-field" />
  <input type="text" class="input-field" />
  <input type="text" class="input-field" />
  <input type="button" id="process-values-button" value="处理值" />
  <ul id="result-list"></ul>
</form>

<script>
  (document).ready(function() {('#process-values-button').click(function() {
      ('.input-field').each(function() {
        var value =(this).val();
        var processedValue = 'Processed: ' + value;
        $('#result-list').append('<li>' + processedValue + '</li>');
      });
    });
  });
</script>

在以上示例中，我们有三个输入元素和一个无序列表。当点击“处理值”按钮时，我们使用.each循环遍历每个输入元素，并对其值进行处理，将其添加到结果列表中。在这个示例中，我们将每个值添加到一个LI元素中，并在值前面添加了“Processed:”前缀。

总结

通过使用jQuery的.each循环，我们可以方便地在循环中获取输入元素的值，并进行相应的处理。在本文中，我们介绍了如何使用.each循环遍历表单元素，并获取其值。我们还提供了一个示例，展示了如何处理每个输入元素的值，并将结果添加到列表中。希望本文能对使用jQuery处理输入值的任务有所帮助。