J'ai un conteneur dynamique .product_section et je dois afficher les en-têtes à l'intérieur de div.toc dans un format de liste UL.

En espérant avoir un script qui vérifie chaque .product_section et crée une liste en utilisant 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>

Comment puis-je faire cela pour qu'il crée une liste dans chaque .product_section

Ce sera comme ça

<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> 
0
Francis Alvin Tan 12 avril 2020 à 07:45

2 réponses

Meilleure réponse

Vous pouvez essayer de la manière suivante:

//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>
1
Mamun 12 avril 2020 à 05:11

Le voici dans 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>
1
Mosia Thabo 12 avril 2020 à 05:32