JS:for 循环在文档中的所有 div 上，以在每个 div 中添加一个新的 div - for 循环包括新添加的 d

Question

我有一个包含许多块的html，如下所示：

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

我想使用js脚本将这些块中的每一个转换为以下内容：

<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(cf adiv.innerHTML(，因此 for 循环不会继续到我想要的下一个div，而是进入第一个div 中的div。

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

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

这是一个完整的脚本。您可以在第一个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>

Answer 2

正如@CodySwann评论中建议的那样，我只需要添加这一行：

var elements_fixed = Array.prototype.slice.call(elements_live)

就在这下面：

var elements_live= document.getElementsByTagName("div");

然后在elements_fixed上运行for循环，如下所示：

for (var i = 0; i < elements_fixed.length; i++) {
...
...
}

---

如果您需要保持元素集合"活动"，则可以改为对子块使用自定义 html 标记。

因此，与其用这个修改adiv.innerHTML：

<div id=""  + attitle_lower + "" class="codebox">" + content + "</div>"

用类似 div-toggle 的内容修改它：

<div-toggle id=""  + attitle_lower + "" class="codebox">" + content + "</div-toggle>"