使用唯一ID创建动态div - jQuery

Question

让我知道,如果我不能很好地解释这一点,因为我只是在思考它而让我感到困惑.

我可以点击一个显示"添加产品"的按钮,并让它每次都创建一个独特的div.例如,第一个div将具有id#product1,然后是#product2等.

真正棘手的部分是在div中有两个输入字段,两个都是常规文本输入.这些也需要有唯一的ID,以便我可以使用它们中的内容.

如果您有任何解决方案,请告诉我.谢谢,卡森

Answer 1

你可以使用递增的ID变量,如下所示:

var i = 1;
$("#addProduct").click(function() {
  $("<div />", { "class":"wrapper", id:"product"+i })
     .append($("<input />", { type: "text", id:"name"+i }))
     .append($("<input />", { type: "text", id:"property"+i }))
     .appendTo("#someContainer");
  i++;
});

你可以在这里尝试一下,这是一个非常一般的答案,但你明白了,只需在每次添加项目后增加变量.

Answer 2

好.这是一个非常古老的帖子,但我认为如果你有类似的问题可能会有所帮助.我在jQuery中遇到了.uniqueId()(见这里).

它检查元素是否已经具有id,如果没有,则为其分配唯一的id.缺点是您不能拥有"自定义ID名称"(例如product_1,product_2等).分配的id类似于ui-id-1,ui-id-2等.

要分配一个唯一的ID,你可以这样 -

$("<div class='someDivConntet'></div>").insertAfter($(this)).uniqueId(); 

只需确保您已经没有在元素上设置id.