javascript更改标签属性未按正确顺序执行？

Question

我有一个 html 文件，其中包含一个包含字段的表格。有些字段用xxx标记，应该转换为textareas。这已成功完成为：

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="textarea" id=0 style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    $('body').html(replaced);
}

现在的任务是为第一个文本区域name="text1"、第二个区域name="text2" 分配一个名称属性，依此类推。 为此，我特意为所有文本区域设置了id=0，正如您在上面的代码中看到的那样。我试图通过使用此代码来实现目标：

var i=1;
    while (document.getElementById('0')) {

        //$('#0')[0].name = 'text'+i;
        //$('#0')[0].id = i;

        document.getElementById("0").name = "text" + i;
        document.getElementById("0").id = i;

        //document.getElementById("0").setAttribute("name","text"+i);
        //document.getElementById("0").setAttribute("id",i);
        i++;

您可能知道，上面的所有三个代码都在工作并且做同样的事情。然而，大问题来了。

当我将代码放入浏览器控制台时，它按预期运行，完美地更改了 name 和 id 属性。但是，如果将代码放入我的文件中，它只会生成文本区域，设置所有 id=0。不执行脚本的第二部分（更改属性值）。我已经在网上找了很多天了，并在堆栈溢出时求助于这里。如果有人能帮助我，那就太棒了。谢谢！！！

注意：需要先执行第一部分，否则您将没有要定位的 id。

编辑：稍微清理一下代码后，这就是我所拥有的。如果有人知道为什么第二部分没有执行，请告诉我。谢谢！

function raplace() {

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="replacement" style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>');

    var replacements = document.getElementsByClassName('replacement');
    var txtArea;

    for (var i = 0; i < replacements.length; i++) {
        txtArea = replacements[i];
        txtArea.id = "text" + i;
        txtArea.name = "text" + i;
    }

$('body').html(replaced);
}

Answer 1

这里有一些不好的做法可能会影响您的解决方案：

1. 您的 ID 不以字母开头。见：What are valid values for the id attribute in HTML?

2. 您有多个具有相同 ID 的元素。

一个建议是使用一个类来定位你的元素，例如

'<textarea class="textarea replacement"' // etc

那么..

var replacements = document.getElementsByClassName('replacement'),
    txtArea;

for (var i = 0; i < replacements.length; i++) {
    txtArea = replacements[i];
    txtArea.id = "text" + i;
    txtArea.name = "text" + i;
}