javascript - js : for loop on all div in document to add a new div inside each of them ― the for loop include the newly added div

Question

我有一个带有许多这样的 block 的 html :

 <div>
    <atitle>Title A</atitle>
    some content (ex: several pre blocks)
</div>

我想使用 js 脚本将每个 block 转换为:

<div class="divtitle">
    <button onclick="toggle('titlea')">Title A</button>
    <div id="titlea" class="codebox">some content</div>
</div>

这是我想出的脚本

<script>
        // get all existing div in document
        var elements = document.getElementsByTagName("div");
        console.log(elements)
        for (var i = 0; i < elements.length; i++) {
            var adiv = elements[i];

            // get title innerText  and remove title node (it will be re-added later)
            var atitle_node= adiv.getElementsByTagName("atitle")[0];
            var atitle_innerHtml = atitle_node.innerHTML;
            adiv.removeChild(atitle_node);
            var content = adiv.innerText;

            // parse title innerText to remove non alpha character so it can be used as id 
            var atitle_removenonalphachar = atitle_innerHtml.replace(/[^a-z]/gi, '')
            var attitle_lower= atitle_removenonalphachar.toLowerCase();

            // modify adiv content
            adiv.innerHTML="<button onclick=\"toggle('"  + attitle_lower  + "')\">"+ atitle_innerHtml + "</button><div id=\""  + attitle_lower + "\" class=\"codebox\">" + content + "</div>";
            adiv.setAttribute("class", "divtitle");
        }
</script>

该脚本适用于第一个 div，但不适用于以下 div。 这对我来说真的很奇怪，因为我是 js 的新手，但我认为这是因为我在 div 内添加了一个 div (参见 adiv.innerHTML)，因此 for 循环不会继续到下一个 div我想要，但是到第一个div里面的div。

我可以通过在控制台中打开 HTMLCollection(3) [div, div, div] 来查看它。即使“标题”表示 3 个 div，当我打开它时，我看到了我期望的 3 个 div 加上新添加的。

所以我的问题是:如何防止 for 循环包含我动态添加的 div？

Here是一个完整的脚本。你可以在第一个div“标题A”上看到我想要的最终“效果”。

Answer 1

我认为您正在寻找此代码。请看一下。

$(document).ready(function(){
   ModifyStructure();
});
function ModifyStructure(){
    var selector=$("div");
    selector.each(function(i,o){
         var currentObj=$(this);
         var innerHTML=currentObj[0].innerHTML;
         var titleText=currentObj[0].children[0].innerText;
         var remainingtext=innerHTML.substr(innerHTML.lastIndexOf(">")+1,innerHTML.length).trim();
         var btn=$("<button/>",{text:titleText});
         btn.on('click',function(){
             toggle($(this).text().toLowerCase())
           })
         currentObj.html('')
         currentObj.append(btn);
         var divtext=remainingtext.substr(0,remainingtext.indexOf("(")-1)
         var div=$("<div/>",{id:titleText.toLowerCase(),class:"codebox",text:divtext});
         currentObj.append(div);
   })
}
function toggle(current){
 console.log(current);
}

<!-- begin snippet: js hide: false console: true babel: false -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>