Javascript更改标签属性时没有按正确的顺序执行

javascript changing tag attributes not being executed in the right order?

本文关键字：执行 顺序 标签 属性 Javascript      更新时间：2023-09-26

我有一个html文件，其中包含一个带有字段的表。有些字段用xxx标记，需要转换为文本区域。

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属性，该属性应该用于第一个文本区域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的目标。

EDIT:稍微清理一下代码后，这是我的代码。如果有人知道为什么第二部分不执行，请让我知道。谢谢!

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);
}

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

  1. 您的ID不是以字母开头的。参见:HTML中id属性的有效值是什么?

  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;
}
相关文章：