Вытащите заголовки и отобразите их в виде div в виде списка.

Question

У меня есть динамический c контейнер .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

Вот оно в 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>

Answer 2

Вы можете попробовать следующий способ:

//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>