如何为HTML div标签添加id属性并生成唯一id值

你的代码存在两个核心错误，导致无法实现预期效果：

• 遍历范围错误：each 循环内部使用 $('.abc') 会选中所有 class 为 abc 的元素，而非当前遍历到的单个元素，会导致所有元素的id被重复覆盖
• 方法使用错误：jQuery UI 提供的 uniqueId() 方法本身就会为选中的元素自动生成并设置唯一id属性，不需要手动调用 attr('id', xxx) 赋值。该方法的返回值是jQuery对象，你直接将返回的对象赋值给id属性，就会出现id中存入对象的问题

你不需要手动写遍历逻辑，直接调用 uniqueId() 方法即可实现需求，正确代码如下：

$("div .abc").uniqueId();

如果你需要自定义id的生成规则（比如指定前缀），也可以手动遍历实现：

$("div .abc").each(function(index) {
  // 自定义前缀+序号生成唯一id，前缀可根据需求修改
  $(this).attr('id', 'custom-' + index);
})

你原有的CSS和HTML代码无需修改，运行后所有class为abc的div都会被设置唯一的id值，且CSS会正常将id内容显示在元素前。

内容的提问来源于stack exchange，提问作者Abhi