批量重命名 html 元素的最简单方法是什么？答案

【问题标题】：What is the easiest way to batch rename html elements?批量重命名 html 元素的最简单方法是什么？
【发布时间】：2014-06-01 20:38:41
【问题描述】：

改变这个：

<ul>
    <li>list one</li>
    <li>list two</li>
    <li>list three</li>
</ul>
<ul>
    <li>list one</li>
    <li>list two</li>
    <li>list three</li>
</ul>

到这里：

<ul id="list_project01_01">
    <li id="itm_project01_01">list one</li>
    <li id="itm_project01_02">list two</li>
    <li id="itm_project01_03">list three</li>
</ul>
<ul id="list_project01_02">
    <li id="itm_project01_04">list one</li>
    <li id="itm_project01_05">list two</li>
    <li id="itm_project01_06">list three</li>
</ul>

棘手的部分是递增的数字。有什么建议吗？

【问题讨论】：

使用一些 xml 解析脚本语言？顺便说一句，你为什么需要那个，这很奇怪。
我知道这很奇怪，但我正在使用的 javascripot 引擎想要这样。
也许你误解了你的 javascript 引擎是如何工作的。编程通常涉及减少重复性任务，而不是增加它们。
不，我明白，我也明白为什么它违反直觉，但现在我只需要标记这些东西

标签： html replace notepad++

【解决方案1】：

我不知道你为什么要这样做，但你可以使用下面的 jQuery 来实现。

   var toBeId = "list_project01_";
   var ulCtr = 0; 

   $("ul").each(function(){
        if(ulCtr < 10){
            $(this).prop("id", toBeId + "0" + ulCtr);
        }
        else{
            $(this).prop("id", toBeId + ulCtr);
        }
        ulCtr++;
    });

    $("ul").each(function(){
        var liCtr = 0;
        $(this).children("li").each(function(){
            var parentId = $(this).parent().prop("id");
            if(liCtr < 10){
                $(this).prop("id", parentId + "_0" + liCtr);
            }
            else{
                $(this).prop("id", parentId + "_" + liCtr);
            }
            liCtr++;
        });
    });

这是一个有效的FIDDLE

【讨论】：

【解决方案2】：

这个简单的 Javascript 应该可以为您完成这项工作。

window.onload=function(){
var uls = document.getElementsByTagName("ul");
var cumul = 1;

for (var i = 0; i < uls.length; ++i) {
    if (i < 10) {
        uls[i].id = "list_project01_0" + (i + 1);
    }
    else {
        uls[i].id = "list_project01_" + (i + 1);
    }

    var lis = uls[i].getElementsByTagName("li");
    for (var j = 0; j < lis.length; ++j) {
        if (cumul < 10) {
            lis[j].id = "itm_project01_0" + cumul;
        }
        else {
            lis[j].id = "itm_project01_" + cumul;
        }

        ++cumul;
    }
}
};

当然，这只有在您的文档中没有任何其他列表时才有效。

【讨论】：

【解决方案3】：

使用 javascript 循环遍历它们。

for(var i=0;i<elems.length;i++){
    /*
      do stuff with i (index)
      or do stuff with elems[i] (element at index i)
    */
}

Here is a fiddle

【讨论】：