时间戳

首页 > 解决方案 > 在 ID 类中添加增量值

javascript - 在 ID 类中添加增量值

问题描述

我是新来的javascript。如何在span HTML内部 HTML 文件中添加 ID 值。

我的 HTML 是：

<!DOCTYPE html>
<html>
<body>
<div>Special characters are:<br/>
<span class="We2" datas2="display">Sample Datas are...</span><br/>
<div><span datas2="display">How do I increment the id or class when I dynamically add the content...</span></div>

<div><span datas2="display">when the code actually runs, 10 will get spit out to</span></div>

<span datas2class="We2" datas2="display">How do I increment the id or class when I dynamically add the content...</span>

<span datas2class="We2" datas2="display">$$

动态添加内容时如何增加 id 或类...

<span datas2class="We2" datas2="display">How do I increment the id or class when I dynamically add the content...</span>
        </div>
</body>

</html>

我期待输出是：

<!DOCTYPE html>
<html>
<body>
<div>Special characters are:<br/>
<span id="value1" class="We2" datas2="display">Sample Datas are...</span><br/>
<div><span id="value2" datas2="display">How do I increment the id or class when I dynamically add the content...</span></div>

<div><span id="value3" datas2="display">when the code actually runs, 10 will get spit out to</span></div>

<span id="value4" datas2class="We2" datas2="display">How do I increment the id or class when I dynamically add the content...</span>

<span id="value5" datas2class="We2" datas2="display">$$

动态添加内容时如何增加 id 或类...

<span id="value6" datas2class="We2" datas2="display">How do I increment the id or class when I dynamically add the content...</span>
        </div>
</body>

</html>

标签： javascriptwhile-loop

解决方案

为此，您需要执行一些步骤：

  1. 您需要获取所有具有属性的元素，datas2 = "display"这可以使用querySelectorAll('[datas2 = "display"]')
  2. 您需要声明一个全局变量 ，j它将更改与likeid连接的值的计数valuevalue+i

var elem = document.querySelectorAll('[datas2 = "display"]');
var j = 1;
for(var i=0; i< elem.length; i++){
  //set id value
  elem[i].id = 'value'+j;
  j++;
}
<div>Special characters are:<br/>
<span class="We2" datas2="display">Sample Datas are...</span><br/>
<div><span datas2="display">How do I increment the id or class when I dynamically add the content...</span></div>

<div><span datas2="display">when the code actually runs, 10 will get spit out to</span></div>

<span datas2class="We2" datas2="display">How do I increment the id or class when I dynamically add the content...</span>

<span datas2class="We2" datas2="display">$$

您将需要在以下代码段中的inspect element该<span>元素上使用浏览器来检查id是否正确存在。

推荐阅读