Javascript 如何为这个js中的每个类项获取唯一的id

这是一个文本，当我们通过文本框添加内容时，每一行都会在

internal

div中通过

quick

添加到一个新的div类中

就像这样：

<div id="inner">
<div class="quiz">this is line one</div>
<div class="quiz">this is second line</div>
<div class="quiz">this is third line</div>
<div class="quiz">and so on...</div>
</div>

<div id="inner">
<div id="1" class="quiz">this is line one</div>
<div id="2" class="quiz">this is second line</div>
<div id="3" class="quiz">this is third line</div>
<div id="4" class="quiz">and so on...</div>
</div>

这是一号线
这是第二行
这是第三条线
等等

但是我想在每个测验类的“n”数字系列中从“1”添加一个唯一的id，就像我们通过这个文本框添加内容时需要的输出一样。 像这样：

<div id="inner">
<div class="quiz">this is line one</div>
<div class="quiz">this is second line</div>
<div class="quiz">this is third line</div>
<div class="quiz">and so on...</div>
</div>

<div id="inner">
<div id="1" class="quiz">this is line one</div>
<div id="2" class="quiz">this is second line</div>
<div id="3" class="quiz">this is third line</div>
<div id="4" class="quiz">and so on...</div>
</div>

这是一号线
这是第二行
这是第三条线
等等

我的全部代码是：

<div id="inner">
<div class="quiz">this is line one</div>
<div class="quiz">this is second line</div>
<div class="quiz">this is third line</div>
<div class="quiz">and so on...</div>
</div>

<div id="inner">
<div id="1" class="quiz">this is line one</div>
<div id="2" class="quiz">this is second line</div>
<div id="3" class="quiz">this is third line</div>
<div id="4" class="quiz">and so on...</div>
</div>

const sendButton=document.getElementById（'send-btn'）；
const textArea=document.getElementById（'input'）；
const innerDiv=document.getElementById（'inner'）；
var message=textArea.value；
sendButton.addEventListener（'click'，function（）{
//将textarea条目拆分为数组
让行=（textArea.value）.split（“\n”）；
//迭代每一行，创建一个div/span并插入DOM
行。forEach（（行）=>{
设encodedLine=encodeHtmlEntity（line）；
让newElement=`${encodedLine}`；
innerDiv.innerHTML+=新元素；
});
//重置文本区域
textArea.value=''；
});
函数编码（输入）{
变量输出=输入。替换（/[\u00A0-\u9999\&]/gim，函数（i）{
返回'&#'+i.charCodeAt（0）+'；'；
});
返回输出；
}

添加内容

您可以使用计数器之类的工具来计算ID并将其附加到元素中。这是您的代码，上面有一些更改：

  let counter = 0;

  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div id="${counter++}" class="quiz">${encodedLine}</div>`;
    innerDiv.innerHTML += newElement;
  });

let计数器=0；
行。forEach（（行）=>{
设encodedLine=encodeHtmlEntity（line）；
让newElement=`${encodedLine}`；
innerDiv.innerHTML+=新元素；
});

让我知道它是否适合您。

/。。。
// ...

  let id = 0; // *** Or whatever you want to start with
  let index = 0; // In case you want to use an array of string values, instead, like this:
  let ids = ['first-id', 'second-id', 'third-id', 'etc...']; // Must match lines

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    
    // You can set id here
    // id++; // Or you could increment by whatever you want
    // 
    // id = id + 5; // Or you could use an array of arbitrary values
    // 
    // id = list_of_ids[index++]; // increment index
    // 
    // or...
    
    let encodedLine = encodeHtmlEntity(line);

    let newElement = `<div class="quiz" id="${id++}">${encodedLine}</div>`; // <-- *** Add id and increment
    innerDiv.innerHTML += newElement;
  });

// ...

设id=0；//**或者你想从什么开始
设索引=0；//如果您想使用字符串值数组，请执行以下操作：
让id=['first-id'，'second-id'，'third-id'，'etc..]；//必须符合标准
//迭代每一行，创建一个div/span并插入DOM
行。forEach（（行）=>{
//您可以在这里设置id
//id++；//或者您可以根据需要递增
// 
//id=id+5；//或者可以使用任意值的数组
// 
//id=列表id[index++]；//增量索引
// 
//或者。。。
设encodedLine=encodeHtmlEntity（line）；
让newElement=`${encodedLine}`//