拉取標題並以列表格式顯示在 div 中

Question

我有一個動態容器.product_section ，我需要在div.toc中以 UL 列表格式顯示標題。

希望有一個腳本來檢查每個.product_section並使用 jquery 創建一個列表

<div class="toc"></div>    

<div class="product_section">
  <h2>Heading 1</h2>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
</div>

<div class="product_section">
  <h2>Heading 2</h2>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
</div>

<div class="product_section">
  <h2>Heading 3</h2>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
  <h3>Sub heading</h3>
</div>

我怎樣才能做到這一點，以便它將在每個.product_section中創建一個列表

所以會是這樣

<div class="toc">

<ul>
   <li><a href="#heading-1">Heading 1</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
</ul>

<ul>
   <li><a href="#heading-2">Heading 2</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
</ul>

<ul>
   <li><a href="#heading-3">Heading 3</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
   <li><a href="#sub-heading">Sub heading</a></li>
</ul>

</div> 

Answer 1

您可以嘗試以下方法：

 //select all the elements with.product_section var products = document.querySelectorAll('.product_section'); //loop through them products.forEach(function(el){ //create ul element var ul = document.createElement('ul'); //find all h2, h3 from the currrent element var c = el.querySelectorAll('h2, h3'); //loop through them c.forEach(function(header){ //create li element var li = document.createElement('li'); //create anchor element var a = document.createElement('a'); //set the href attribute and set the link text a.href = '#' + header.textContent.toLowerCase().replace(' ', '-'); a.textContent = header.textContent; li.appendChild(a); //append the li to ul element ul.appendChild(li); }); //append the ul to div element document.querySelector('.toc').appendChild(ul); //remove the current div element el.remove(); });

 <div class="toc"></div> <div class="product_section"> <h2>Heading 1</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div> <div class="product_section"> <h2>Heading 2</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div> <div class="product_section"> <h2>Heading 3</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div>

Answer 2

這是 Jquery

 var product_section_list = document.querySelectorAll('div.product_section'); product_section_list.forEach( function(product_section) { // create a new <ul> with class product_section var ul = $('<ul />').addClass("product_section"); product_section.querySelectorAll('h2, h3').forEach( function(h) { // create new <li> for each h2 and h3 returned ul.append($('<li />').append( // add a link anchor and set href and innerHTML $('<a />').attr('href',"#" +$(h).text().toLowerCase()).html($(h).text())) ); } ); //append ul into.toc element ul.appendTo(document.querySelector('.toc')); } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toc"></div> <div class="product_section"> <h2>Heading 1</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div> <div class="product_section"> <h2>Heading 2</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div> <div class="product_section"> <h2>Heading 3</h2> <h3>Sub heading</h3> <h3>Sub heading</h3> <h3>Sub heading</h3> </div>