[英]create nested loop of divs
我想創建一個小的嵌套循環,它將從我的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>
這應該工作 -
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.