查找克隆添加的元素

时间:2009-10-22 05:25:13

标签: jquery copy clone

以下是我的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“ingredientrow1”并且我将所有id增加1,所以现在我的HTML有两个带有id的div:“ingredientrow1”和“ingredientrow2”。用户可以通过单击id为“addIngredient1”的锚点来克隆此div任意数量的时间。

注意:问题“recipe_ingredient_serving_size_id1”的选择控件的id也会随着... id2而改变。

我还在控件“singleIngredient1”上使用自动完成插件,该插件将设置隐藏输入中所选成分的ID,并在选择框中填充服务大小。

问题:由于用户可以生成n个ingredientrow div,我不知道选择成分时要填充哪个选择框。

已知事实:我确实知道用户正在使用哪种内容。我得到这样的

var recipeingredientid = $(this).next()。attr(“id”);

给了我“ingredientrown”,其中n是1,2,....

我的问题:如何访问特定ingredientrow中的recipe_ingredient_serving_size_idn选择框?由于选择ID已更改。

我的问题示例:如果我的recipeingredientid是“ingredientrow2”,那么select控件的id将以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作为ingredientid但这只是一个测试......

感谢您的时间。

3 个答案:

答案 0 :(得分:3)

您无需知道选择框的确切ID即可找到它。

例如,如果您知道您在其中工作的div是ingredientrow1,那么您可以只对该div内的选择框进行查询。

看起来像这样:

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

此时您有选择框,可以根据需要进行操作。如果需要获取元素的id,可以在container_id的子字符串上执行parseInt。这看起来像这样:

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

您的问题有点难以理解,但希望这是相关信息。祝你好运。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

鉴于recipe_ingredient_serving_size是一个选择框,并且是容器中唯一的选择框,以下内容应该有效。

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

那应该把你排除在外。如果您最终选择了多个,则可以给它一个类并使用它来选择它。