Encontrar un elemento añadido por clon.

Question

El siguiente es mi HTML

<div id="ingredientrow1">
    <div id="add"><a href="#" id="addIngredient1">Add</a></div>
    <div id="remove"><a href="#" id="removeIngredient1">Remove</a></div>
    <div id="si">
      <input type="text" id="singleIngredient1" name="single_ingredient" />
      <input type="hidden" id="recipe_ingredient_id1" name="recipe[new_ri_attributes][][ingredient_id]" />
    </div>
    <div id="iq"><input type="text" id="recipe_ingredient_quantity" name="recipe[new_ri_attributes][][quantity]" class="txt_qty" /></div>
    <div id="iss"><select id="recipe_ingredient_serving_size_id1" name="recipe[new_ri_attributes][][serving_size_id]" ></select></div>
  </div>

Clono el div " ingredienterow1 " e incremento todos los ID's por uno, así que ahora mi HTML tiene dos divs con ID's: " ingredienterow1 " y " ingredienterow2 " ;. El usuario puede clonar este div cualquier tiempo haciendo clic en el ancla con id " addIngredient1 " ;.

Nota: el ID del control de selección en cuestión " recipe_ingredient_serving_size_id1 " También se cambia con ... id2.

También uso el complemento autocompletado en el control " singleIngredient1 " que establecerá la identificación del ingrediente seleccionado en la entrada oculta y también rellenará los tamaños de porción en el cuadro de selección.

El problema : dado que el usuario puede generar un número n de div de ingredienterow, no sé qué cuadro de selección se debe rellenar cuando se selecciona un ingrediente.

Datos conocidos : sí sé en qué ingrediente está trabajando el usuario. Lo tengo así

var recipeingredientid = $ (this) .next (). attr (" id ");

que me da " ingredienterown " donde n es 1, 2, ....

Mi pregunta : ¿Cómo llego al recuadro de selección recipe_ingredient_serving_size_size_idn en un ingrediente específico? Dado que la identificación de selección habrá cambiado.

Ejemplo de mi pregunta : si mi receta es para " ingredienterow2 " entonces la identificación del control de selección terminará con 2. ¿Cómo obtengo una referencia a ese control de selección?

Este es mi JQuery que se ejecuta cuando el usuario selecciona un ingrediente de la entrada de autocompletado

$("input[id*='singleIngredient']").result(function(event, data, formatted) {

    if (data) {

      var recipeingredientid = $(this).next().attr("id");
      $("#" + recipeingredientid).val(data[1]);

      $.getJSON("/serving_sizes?ingredientid=1", function(j) {

        var options = "<option value=''>Please select a serving size</option>";
 for (var i=0; i < j.length; i++)
   options += '<option value="' + j[i].serving_size.id + '">' + j[i].serving_size.name + '</option>';

//I am trying not to hard code this id here.
 $("#recipe_ingredient_serving_size_id1").html(options);
      });
    }

  });

Sé que siempre estoy pasando 1 como ingrediente, pero esto es solo una prueba ...

Gracias por tu tiempo.

Answer 1

No es necesario que conozcas el ID exacto del cuadro de selección para encontrarlo.

Si, por ejemplo, sabe que el div en el que está trabajando es ingredienterow1 , puede hacer una consulta para el cuadro de selección dentro de ese div.

Eso se vería así:

var container_id  = 'ingredientrow1';
var $select_box = $(container_id).find('select[id^=recipe_ingredient_serving_size_id]');

En este punto, tiene su cuadro de selección y puede manipularlo como mejor le parezca. Si necesita obtener el ID del elemento, puede hacer un parseInt en una subcadena del container_id. Eso se vería así:

var container_id  = 'ingredientrow1';
var id_prefix     = 'ingredientrow';
var prefix_length = id_prefix.length;
var id_num        = parseInt( container_id.substring(prefix_length) ,10);

doSomething(data[id_num]); // this is hypothetical...

Su pregunta es un poco difícil de entender, pero espero que esta información sea relevante. La mejor de las suertes.

Answer 2

$(this)
  .parents("[id^='singleIngredient']")
  .find("[id^='recipe_ingredient_serving_size_id']")

Answer 3

Dado que recipe_ingredient_serving_size es un cuadro de selección, y el único cuadro de selección en su contenedor, lo siguiente debería funcionar.

$(this).parent().find('select').html(options)

Eso debería arreglarte. Si terminas con más de 1 selección, podrías darle una clase y usarla para seleccionarla.