如何在 html div 标签内添加 id 属性和唯一 id

Question

我想在 id 属性中添加 id 属性和唯一 id。我试过但是在 id 属性中获取对象

$("div .abc").each(function() {
  $('.abc').attr('id', $(this).uniqueId());
})

[id]::before {
  content: attr(id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<div class="xyz">
  <div class="abc"></div>
  <div class="abc"></div>
  <div class="abc"></div>
</div>

Answer 1

yu 可以使用每个循环或 for 循环

将 id 自动递增到 html 元素

每个循环都是这样；

$(".abc").each(function(i) {
  $(".abc").attr('id', 'id' + i);
})

或使用for循环

for(var i = 0, i = $(".abc").length, i++){
  $(".abc").attr('id', 'id' + i);
}

Answer 2

jQueryUI .uniqueId() 方法在内部完成您需要的所有工作。它 returns 是一个 jQuery 对象，这就是为什么您会看到看起来像对象的原因。在 .each() 回调中你只需要

  $(this).uniqueId();

事实上你甚至不需要 .each():

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

将遍历匹配的元素并为每个元素赋予唯一的 id 值。

Answer 3

完整代码在这里

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div class="xyz">
      <div class="abc"></div>
      <div class="abc"></div>
      <div class="abc"></div>
    </div>
  </body>
  <script>
    $(".abc").each(function (index) {
      $(this).attr("id", "abc" + index);
    });
  </script>
</html>

如何在 html div 标签内添加 id 属性和唯一 id

how to add id attribute and unique id inside html div tag

html

jquery

jquery-ui