Question

改变这个：

<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>

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

Answer 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

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

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

Answer 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

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

3 个答案: