Поиск элемента, добавленного клоном - PullRequest
Новая
       13

Поиск элемента, добавленного клоном

0 голосов
/ 22 октября 2009

Вот мой 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>

Я клонирую div "ингридиенты1" и увеличиваю все идентификаторы на единицу, так что теперь в моем HTML есть два двух элемента div с идентификаторами: "ингридиенты" и "ингредиенты". Пользователь может клонировать этот div любое количество раз, нажав на ссылку с идентификатором «addIngredient1».

Примечание. Идентификатор рассматриваемого элемента управления select "recipe_ingredient_serving_size_id1" также изменяется с ... id2.

Я также использую плагин автозаполнения для элемента управления "singleIngredient1", который будет устанавливать идентификатор ингредиента, выбранного в скрытом вводе, а также заполнять размеры порций в поле выбора.

Проблема : Так как пользователь может сгенерировать n чисел ингридиентов, я не знаю, какое поле выбора заполнить при выборе ингредиента.

Известные факты : Я знаю, над каким ингредиентом работает пользователь. Я так понимаю

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

, который дает мне "ингридиент", где n равно 1, 2, ....

Мой вопрос : Как мне попасть в поле выбора recipe_ingredient_serving_size_idn в определенной строке ингредиентов? Поскольку выбранный идентификатор будет изменен.

Пример к моему вопросу : Если мой recipeingredientid - "componentrow2", то идентификатор элемента управления select заканчивается 2. Как я могу получить ссылку на этот элемент управления select?

Это мой JQuery, который запускается, когда пользователь выбирает ингредиент из автозаполнения ввода 

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

  });

Я знаю, что всегда пропускаю 1 в качестве ингредиента, но это всего лишь тест ...

Спасибо за ваше время.

Ответы [ 3 ]

3 голосов
/ 22 октября 2009

Вам не нужно знать точный идентификатор поля выбора, чтобы найти его.

Если вы знаете, например, что div, внутри которого вы работаете, это ingredientrow1, тогда вы можете просто сделать запрос для поля выбора внутри этого div.

Это будет выглядеть так: 

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

На данный момент у вас есть поле выбора и вы можете манипулировать им по своему усмотрению. Если вам нужно получить идентификатор элемента, вы можете выполнить parseInt для подстроки container_id. Это будет выглядеть так: 

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

Ваш вопрос немного сложен для понимания, но, надеюсь, это важная информация. Желаем удачи.

0 голосов
/ 22 октября 2009

Учитывая, что recipe_ingredient_serving_size является окном выбора, и единственным окном выбора в вашем контейнере, должно работать следующее. 

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

Это должно разобраться с тобой. Если у вас будет более 1 выбора, вы можете дать ему класс и использовать его для выбора.

0 голосов
/ 22 октября 2009 
$(this)
  .parents("[id^='singleIngredient']")
  .find("[id^='recipe_ingredient_serving_size_id']")
...