创建 div 的嵌套循环

Question

我想创建一个小的嵌套循环，它将从我的h1和h2 / h3标签创建 div。 我意识到这对于其他问题可能是多余的，所以至少我想指出正确的方向:)

鉴于此 HTML：

<h1>LEVEL 1.1</h1>
<h2 class="section">SECTION 2.1</h2>
<h2 class="section">SECTION 2.2</h2>
<h2 class="section">SECTION 2.3</h2>
<h1>LEVEL 1.2</h1>
<h2 class="section">SECTION 2.4</h2>
<h2 class="section">SECTION 2.5</h2>
<h2 class="section">SECTION 2.6</h2>
<h1>LEVEL 1.3</h1>
<h2>SECTION 2.7</h2>
<h2>SECTION 2.8</h2>
<h2>SECTION 2.9</h2>

我想创建新的 HTML （在所需的输出中）

 const h1_div = function(nm) { return `<div class="level-1-header">${nm}</div>` } const h2_div = function(num, nm) { return `<div class="topic" index=${num}>${nm}</div>` } $(document).ready(function() { var headings = document.querySelectorAll("h1, h2, h3"); H1_divs = []; H2_divs = []; all_divs = []; // create a loop that makes an H1 div // and puts all the H2 divs inside it /* <div "level-1-header">LEVEL 1.1 <div class="topic" index="1">SECTION 2.1</div> <div class="topic" index="2">SECTION 2.2</div> <div class="topic" index="3">SECTION 2.3</div> </div> <div "level-1-header">LEVEL 1.2 <div class="topic" index="4">SECTION 2.4</div> <div class="topic" index="5">SECTION 2.5</div> <div class="topic" index="6">SECTION 2.6</div> </div> <div "level-1-header">LEVEL 1.3 <div class="topic" index="7">SECTION 2.7</div> <div class="topic" index="8">SECTION 2.8</div> <div class="topic" index="9">SECTION 2.9</div> </div> */ test = []; // loop over the h1 // and within every h1 make the h2s for (i = 0; i < headings.length; i++) { if (headings[i].tagName === "H1") { H1_divs += h1_div(headings[i].innerText) for (j = 0; j < headings.length; j++) { if (headings[j].tagName,== "H1") { // this is definitely wrong H2_divs += h2_div(j. headings[j].innerText) } } test = test + H2_divs } } // not quite right console.log(test) // put that created element inside #section-toc document.getElementById("section-toc");innerHTML = all_divs });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="section-toc"></div> <h1>LEVEL 1.1</h1> <h2 class="section">SECTION 2.1</h2> <h2 class="section">SECTION 2.2</h2> <h2 class="section">SECTION 2.3</h2> <h1>LEVEL 1.2</h1> <h2 class="section">SECTION 2.4</h2> <h2 class="section">SECTION 2.5</h2> <h2 class="section">SECTION 2.6</h2> <h1>LEVEL 1.3</h1> <h2>SECTION 2.7</h2> <h2>SECTION 2.8</h2> <h2>SECTION 2.9</h2>

期望的结果：

<div "level-1-header">LEVEL 1.1
     <div class="topic" index="1">SECTION 2.1</div>
     <div class="topic" index="2">SECTION 2.2</div>
     <div class="topic" index="3">SECTION 2.3</div>
    </div>
    
    <div "level-1-header">LEVEL 1.2
     <div class="topic" index="4">SECTION 2.4</div>
     <div class="topic" index="5">SECTION 2.5</div>
     <div class="topic" index="6">SECTION 2.6</div>
    </div>
    
    <div "level-1-header">LEVEL 1.3
     <div class="topic" index="7">SECTION 2.7</div>
     <div class="topic" index="8">SECTION 2.8</div>
     <div class="topic" index="9">SECTION 2.9</div>
    </div>

Answer 1

这应该工作 -

 const h1_div = function(nm) { return `<div class='level-1-header'>${nm}</div>` } const h2_div = function(nm, num) { return `<div class="topic" index=${num}>${nm}</div>` } const replaceHtml = function(tag, htmlFunction) { var $tag = $(tag); for (var i = 0; i < $tag.length; i++) { var currentTag = $tag[i]; var $newHtml = $(htmlFunction(currentTag.innerHTML, i+1)); $(currentTag).replaceWith($newHtml); } } $(document).ready(function() { replaceHtml("h1", h1_div); replaceHtml("h2", h2_div); console.log(document.getElementById("section-toc").innerHTML); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="section-toc"> <h1>LEVEL 1.1</h1> <h2 class="section">SECTION 2.1</h2> <h2 class="section">SECTION 2.2</h2> <h2 class="section">SECTION 2.3</h2> <h1>LEVEL 1.2</h1> <h2 class="section">SECTION 2.4</h2> <h2 class="section">SECTION 2.5</h2> <h2 class="section">SECTION 2.6</h2> <h1>LEVEL 1.3</h1> <h2>SECTION 2.7</h2> <h2>SECTION 2.8</h2> <h2>SECTION 2.9</h2> </div>