Cómo cambia la leyenda de la etiqueta que se genera dinámicamente a través de jQuery

Este es mi código actual

<div class="form-group">
    <label class="col-sm-2 control-label">Scheme Length</label>
    <div class="col-sm-10">
    <input type="number" name="s_Length" min="1" max="24" class="form-control" id="s_Length" placeholder="No. of Draws" required> 
    </div>
</div>`

<div class="dynamiclength"></div>

Y script es

$("#s_Length").change(function(){
    var maxField = $(this).val();
    var wrapper = $('.dynamiclength');
    wrapper.html("");
    var fieldHTML = '<div class="form-group"><label class="col-sm-2 control-label">Draw Dates</label><div class="col-sm-10"><input type="text" name="drawdate[]" class="form-control" placeholder="No. of Draws" value="" required></div>';
    var x;
    for(x=0; x < maxField; x++){ 
        $(wrapper).append(fieldHTML);
    }
});

Entonces, ¿cómo puedo cambiar la etiqueta de los campos de entrada generados, digamos 1st Draw date, 2nd Draw Date ... según no. de los campos generados?

1
user3045457 28 jun. 2019 a las 07:49

1 respuesta

La mejor respuesta

A) Ponga su código fieldHTML dentro del bucle.

B) Crear una función para obtener la correspondiente st,nd,rd,th basada en el número.

C) var x; en realidad no se requiere.

Fragmento de trabajo:-

$("#s_Length").change(function(){
  var maxField = $(this).val();
  var wrapper = $('.dynamiclength');
  wrapper.html("");
  for(x=0; x < maxField; x++){
    var fieldHTML = '<div class="form-group"><label class="col-sm-2 control-label">'+ordinal_suffix_of(x+1)+ ' Draw Dates</label><div class="col-sm-10"><input type="text" name="drawdate[]" class="form-control" placeholder="No. of Draws" value="" required></div>';
    $(wrapper).append(fieldHTML);
  }
});

function ordinal_suffix_of(i) {
  var j = i % 10,
  k = i % 100;
  if (j == 1 && k != 11) {
    return i + "st";
  }
  if (j == 2 && k != 12) {
    return i + "nd";
  }
  if (j == 3 && k != 13) {
    return i + "rd";
  }
  return i + "th";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label">Scheme Length</label>
  <div class="col-sm-10">
    <input type="number" name="s_Length" min="1" max="24" class="form-control" id="s_Length" placeholder="No. of Draws" required>
  </div>
</div>

<div class="dynamiclength"></div>

Referencia tomada: - Agregar St, ND, RD y el sufijo (ordinal) a un número

1
Serving Quarantine period 28 jun. 2019 a las 05:02