¿Cómo recorrer los elementos de entrada en jQuery?

En este artículo, aprenderemos cómo recorrer los elementos de entrada y mostrar sus valores actuales en jQuery. Esto se puede hacer usando dos enfoques:

Enfoque 1: en este enfoque, iteraremos sobre cada tipo de entrada que sea de tipo texto usando input[type=text] como selector. A continuación, usaremos el método each() para iterar sobre las entradas para mostrar los valores o realizar cualquier operación según sea necesario.

Sintaxis:

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

Ejemplo:

HTML

<html>
<head>
  
  <!-- Include jQuery -->
  <script src=
"https://code.jquery.com/jquery-3.6.0.js">
  </script>
  <script>
    $(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);
        });
      })
    });
  </script>
</head>
<body>
  
  <!-- Define the form and the inputs -->
  <form action="" id="formId">
    <label>enter email</label>
    <input type="text"
           placeholder="email"><br>
    <label>enter name</label>
    <input type="text"
           placeholder="name"><br>
    <label>enter city</label>
    <input type="text"
           placeholder="city"><br><br>
    <button type="button" 
            id="buttonId">
      Loop Through
    </button>
  </form>
</body>
</html>

Producción:

Enfoque 2: en este enfoque, intentaremos iterar sobre todos los tipos de entrada posibles. Seleccionaremos el formulario usando la identificación del formulario e iteramos sobre cada tipo de entrada usando el método filter() en jQuery. Las entradas se pueden filtrar especificando el : selector de entrada en jQuery que selecciona cada tipo de entrada en el elemento que se utiliza. A continuación, usaremos el método each() para iterar sobre las entradas para mostrar los valores o realizar cualquier operación según sea necesario.

Sintaxis:

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

Ejemplo:

HTML

<html>
<head>
  
  <!-- Include jQuery -->
  <script src=
"https://code.jquery.com/jquery-3.6.0.js">
  </script>
  <script>
    $(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());
        });
      })
    })
  </script>
</head>
<body>
  
  <!-- Define the form and the inputs -->
  <form action="" id="formId">
    <label>enter email</label>
    <input type="email"
           placeholder="email"><br>
    <label>enter password</label>
    <input type="password" 
           placeholder="password"><br>
    <label>enter city</label>
    <input type="text" 
           placeholder="city">
    <br><br>
    <button type="button" 
            id="buttonId">
      Loop Through
    </button>
  </form>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por rajatagrawal5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *