Help with a for .each in jquery

0

Hello everyone my question is the following I have an input that can be 1 to N depends on the php forech and with that PHP I put the name and ID, in my JS what I want is to know their ID of each one bone if it brings me one, capture the input ID and so if it brings me N, at the moment only brings me the ID of the first and to know that this is the code I think to know the N id would be a for but I do not know how to build it THANK YOU.

var hola = $(".numeros").attr("id");
alert(hola);

This is my php code

<tr>
<td>Número de estudiantes del turno según SIAGIE</td>
<?php foreach ($niveles as $obj) { ?>
<td>
<div class="form-group">
<div class="col-md-12">
<input class="form-control numeros" type="text" id="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>"  name="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>">
</div>
</div>
</td>
<?php } ?>

    
asked by Ivan More Flores 08.05.2017 в 16:41
source

3 answers

1

Go through all the elements by a class common to all and ask the id:

$(".numeros").each(function() {
    var id = "#"+this.id;   
    alert(id);
});
    
answered by 08.05.2017 / 17:00
source
1

You can go through the elements of DOM with .each() of jQuery, to do it first you have to select which elements are going to be selected.

If selected by class, the jQuery selector will return an array with all selected elements $('.clase') .

Now we just have to apply the .each() method to go through the elements, so the function would be as follows:

$('.numeros').each(function(index, elem) {
  //index: Posision del elemento actual de 0 - N.
  //elem: Elemento actual del DOM que esta seleccionado
  console.log($(elem).attr('id'));
});

Example: (This is an example of what could apparently be seen in the browser)

$(function() {
  var arrIds = [];
  $('.numeros').each(function(index, elem) {
    console.log($(elem).attr('id'));
  })

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-group">
  <div class="col-md-12">
    <input class="form-control numeros" type="text" id="3_001" name="3_001">
  </div>
</div>
<div class="form-group">
  <div class="col-md-12">
    <input class="form-control numeros" type="text" id="3_002" name="3_002">
  </div>
</div>
<div class="form-group">
  <div class="col-md-12">
    <input class="form-control numeros" type="text" id="3_003" name="3_003">
  </div>
</div>
<div class="form-group">
  <div class="col-md-12">
    <input class="form-control numeros" type="text" id="3_004" name="3_004">
  </div>
</div>
    
answered by 08.05.2017 в 17:02
0

I have left you a small example so you can learn how it works and execute it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
  function tomarElementos(){
    var respuesta = "";
    var maximoElementos = $(".numeros").size();
    for(i = 0; i<maximoElementos; i++){
      respuesta = respuesta + "/" + $(".numeros:eq("+i+")").val();
    }
    alert(respuesta);
  }
  
</script>
<input class="numeros" type="text" id=""  name="" value="asd0">
<input class="numeros" type="text" id=""  name="" value="asd1">
<input class="numeros" type="text" id=""  name="" value="asd2">
<input class="numeros" type="text" id=""  name="" value="asd3">
<button onclick="tomarElementos()">clickme</button>

In your particular case it is as follows:

<tr>
<td>Número de estudiantes del turno según SIAGIE</td>
<?php foreach ($niveles as $obj) { ?>
<td>
<div class="form-group">
<div class="col-md-12">
<input class="form-control numeros" type="text" id="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>"  name="3_<?php echo str_replace(' ', '_', $obj->nivel) . '_' . $obj->codigoModular; ?>">
</div>
</div>
</td>
<?php } ?>

Jquery

<script>
    var respuesta = ""; //Variable para salida
    var maximoElementos = $(".numeros").size(); //Define la cantidad de nodos con esta clase
    for(i = 0; i<maximoElementos; i++){ //recorre la n cantidad de nodos
      respuesta = respuesta + "/" + $(".numeros:eq("+i+")")attr("id"); //va asignando a respuesta, el dato anterior mas el valor del nuevo nodo
    }

    alert(respuesta); //Lanza el resultado del recorrido
</script>

I hope you can understand and be of help. Anything please let me know in the comments to guide you.

Success in your project!

    
answered by 08.05.2017 в 17:05