如何循环遍历 jQuery 中的输入元素？

在本文中，我们将学习如何在 jQuery 中循环输入元素并显示它们的当前值。这可以使用两种方法来完成：

方法 1：在这种方法中，我们将使用input[type=text]作为选择器来迭代每个文本类型的输入类型。接下来，我们将使用each()方法迭代输入以显示值或根据需要执行任何操作。

句法：

$("#id input[type=text]").each(function() {
    //... your code
});

例子：

HTML

  
  
  
  
  
    $(document).ready(function () {
  
      // Bind the click event to the function
      $("#buttonId").click(function () {
          
        // Select all the elements with the
        // type of text
        $("#formId input[type=text]")
            .each(function () {
  
          // Print the value currently in
          // the input box
          console.log(this.value);
        });
      })
    });
  


  
  
  
    enter email
    
    enter name
    
    enter city
    
    
      Loop Through
    
  

输出：

方法 2：在这种方法中，我们将尝试迭代所有可能的输入类型。我们将使用表单 id 选择表单，并使用 jQuery 中的 filter() 方法迭代每个输入类型。可以通过在 jQuery 中指定 :input选择器来过滤输入，该选择器选择使用它的元素上的每种类型的输入。接下来，我们将使用each()方法迭代输入以显示值或根据需要执行任何操作。

句法：

$('#id *').filter(':input').each(function () {
     //..your code
});

例子：

HTML

  
  
  
  
  
    $(document).ready(function () {
  
      // Bind the click event to the function
      $("#buttonId").click(function () {
  
        // Select all the elements
        // which is of the type of input
        $('#formId *').filter(':input')
                        .each(function () {
  
        // Print the value currently in
        // the input element
          console.log($(this).val());
        });
      })
    })
  


  
  
  
    enter email
    
    enter password
    
    enter city
    
    
    
      Loop Through
    
  

输出：