javascript - 没有 #id 的目标 DIV，添加 #id

Question

我是 JavaScript 和 CSS 的新手，我的技能充其量只是很差。我知道如何解决我的问题，但我没有解决它的知识。
我有这样的代码:

<div class="detail">
    <div class="detail-group"></div>
    <div class="detail-group"></div>
    <div class="detail-group"></div>
</div> 

我必须将一个具有唯一#id 的现有 DIV 附加到每个.detail-group DIV。我必须指定 .detail-group，即使它们完全相同。 我无权访问 HTML 以手动编辑它。
如果我是正确的，我最好的办法是使用 JS 为那些 .detail-group DIV 设置 ID。
我使用 CSS 以此来定位它们中的每一个并创造差异:

.detail-group:nth-child(1) { padding-right: 0.01px }
.detail-group:nth-child(2) { padding-right: 0.02px }
.detail-group:nth-child(3) { padding-right: 0.03px }

但我不知道如何用 JS 检测这种差异并使用它。 JS中是否可以区分元素的顺序？如果有，怎么做。以及如何为其添加 ID？

旁注，我正在使用 Enjin 模块，这就是我无法访问其 HTML 的原因。如果有人在该领域有经验，将不胜感激。

Answer 1

您可以使用 .attr() 函数及其回调来使用 div 元素的索引设置 ids:

$('.detail-group').attr('id', function(i) {
  return 'detailgroup'+(i+1);
});

Working Demo