Encontrar um elemento adicionado pelo clone

Question

A seguir é meu 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>

Eu clono o div "IngredientRow1" e incremento todos os IDs de um, então agora meu HTML tem duas duas div com IDs: "IngredientRow1" e "IngredientRow2". O usuário pode clonar esta div, clicando na âncora com o ID "AdicionarDient1".

Nota: O ID do controle de seleção em questão "Recipe_ingredient_Serving_Size_Id1" também é alterado com ... ID2.

Eu também uso o plug -in de preenchimento automático no controle "SingeningRedient1", que definirá o ID do ingrediente selecionado na entrada oculta e também preenche os tamanhos de porção na caixa de seleção.

O problema: Como o usuário pode gerar n número de ingredientes, não sei qual caixa de seleção para preencher quando um ingrediente é selecionado.

Fatos conhecidos: Eu sei em que ingrediente o usuário está trabalhando. Eu entendo assim

var RecipeingRedIentId = $ (this) .Next (). Att ("ID");

O que me dá "ingrediente" onde n é 1, 2, ....

Minha pergunta: Como faço para chegar à caixa Recipe_ingRedient_Serving_Size_Idn em um ingrediente específico? Como o ID selecionado terá alterado.

Exemplo para minha pergunta: Se meu RecipeingRedIentId for "IngredientRow2", o ID do controle de seleção terminará com 2. Como faço para obter uma referência a esse controle selecionado?

Este é o meu jQuery que é executado quando o usuário seleciona um ingrediente a partir da entrada de preenchimento automático

$("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);
      });
    }

  });

Eu sei que estou sempre passando 1 como o ingrediente, mas isso é apenas um teste ...

Obrigado pelo seu tempo.

Answer 1

Você realmente não precisa saber o ID exato da caixa de seleção para encontrá -la.

Se você sabe, por exemplo, que o div que você está trabalhando dentro de ingredientrow1 Então você pode fazer uma consulta para a caixa de seleção dentro dessa div.

Isso seria assim:

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

Neste ponto, você tem sua caixa de seleção e pode manipulá -la como achar melhor. Se você precisar obter o ID do elemento, poderá fazer um parseint em uma substring do contêiner_id. Isso seria assim:

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...

Sua pergunta é um pouco difícil de entender, mas espero que isso seja uma informação relevante. Boa sorte.

Answer 2

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

Answer 3

Dado que o Recipe_ingredient_Serving_Size é uma caixa de seleção e a única caixa de seleção no seu contêiner, o seguinte deve funcionar.

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

Isso deve resolver você. Se você acabar com mais de 1 selecionar, poderá fazer uma aula e usá -lo para selecioná -lo.