Question

我有一个带有许多这样的html的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]来看到它。甚至以为“标题”表示3格，当我打开它时，我看到了我期望的3格以及新添加的格。

所以我的问题是：如何防止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>

Answer 2

正如@CodySwann在评论中建议的那样，我只需添加以下行：

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

正好在此以下：

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

然后像这样在for上运行elements_fixed循环：

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

如果需要使元素集合保持“活动”状态，则可以对子块使用custom html tag。

因此，不要使用以下命令来修改adiv.innerHTML：

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

使用div-toggle之类的内容对其进行修改：

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

js：文档中所有div上的for循环可在其中的每个div中添加新的div － for循环包括新添加的div

2 个答案: