Trouver un élément ajouté par clone

Question

Ce qui suit est mon 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>

Je clone la div " ingredientsrow1 " et j'incrémente tous les identifiants d'un, si bien que mon code HTML comporte deux div avec des identifiants: "ingrédient1". et "ingrédient2". L’utilisateur peut cloner cette division à n’importe quel moment en cliquant sur l’ancre portant l’identifiant "addIngredient1".

Remarque: l'id du contrôle de sélection en question "recipe_ingredient_serving_size_id1". est également changé avec ... id2.

J'utilise également le plug-in autocomplete sur le contrôle "singleIngredient1". qui définira l'identifiant de l'ingrédient sélectionné dans l'entrée masquée et renseignera également les tailles de portion dans la zone de sélection.

Le problème : étant donné que l'utilisateur peut générer un nombre n de div divs ingrédient, je ne sais pas quelle zone de sélection renseigner lorsqu'un ingrédient est sélectionné.

Faits connus : je sais sur quel ingrédient l'utilisateur travaille. Je reçois ça comme ça

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

qui me donne "ingredrown" où n est 1, 2, ....

Ma question : Comment accéder à la zone de sélection recipe_ingredient_serving_size_idn dans un ingrédient spécifique? Depuis l'id de sélection aura changé.

Exemple à ma question : Si mon identifiant de recette est "ingrédient2" alors l'id du contrôle select se terminera par 2. Comment obtenir une référence à ce contrôle select?

Ceci est mon JQuery qui s'exécute lorsque l'utilisateur sélectionne un ingrédient à partir de l'entrée de saisie semi-automatique

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

  });

Je sais que je passe toujours 1 comme ingrédient mais ceci n’est qu’un test ...

Merci de votre temps.

Answer 1

Vous n'avez pas vraiment besoin de connaître l'identifiant exact de la zone de sélection pour le trouver.

Si vous savez, par exemple, que la division dans laquelle vous travaillez est ingrédient1 , vous pouvez simplement effectuer une requête pour la zone de sélection à l'intérieur de cette division.

Cela ressemblerait à ceci:

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

À ce stade, vous avez votre boîte de sélection et vous pouvez la manipuler comme bon vous semble. Si vous devez obtenir l'id de l'élément, vous pouvez effectuer une analyse parseInt sur une sous-chaîne de conteneur_id. Cela ressemblerait à ceci:

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

Votre question est un peu difficile à comprendre, mais j'espère que ce sont des informations pertinentes. Bonne chance.

Answer 2

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

Answer 3

Etant donné que recipe_ingredient_serving_size est une zone de sélection et la seule zone de sélection de votre conteneur, les éléments suivants devraient fonctionner.

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

Cela devrait vous aider. Si vous vous retrouvez avec plus d'une sélection, vous pouvez lui attribuer une classe et l'utiliser pour la sélectionner.