Automatisches Inhaltsverzeichnis mit jQuery

#hierarchical-list ol { counter-reset: item }
#hierarchical-list li{ display: block }
#hierarchical-list li:before { content: counters(item, ".") " "; counter-increment: item }

$(document).ready(function() {
    // Select all heading elements (h1 to h6) within the specified container
    const headings = $('.item-page > div[class$="_body"] :header');
    
    // Check if there are no headings
    if (headings.length === 0) {
        return; // Exit if there are no headings
    }

    // Initialize the hierarchy array to store the structured headings
    const hierarchy = [];

    // Function to find the appropriate parent for the current heading based on its level
    function findParent(level, currentHierarchy) {
        // If the current hierarchy is empty or the last item in the hierarchy has a level >= current level, return current hierarchy
        if (!currentHierarchy.length || currentHierarchy[currentHierarchy.length - 1].level >= level) {
            return currentHierarchy;
        } else {
            // Otherwise, recursively find the parent in the subheadings of the last item
            return findParent(level, currentHierarchy[currentHierarchy.length - 1].subheadings);
        }
    }

    // Loop through each heading element
    headings.each(function() {
        // Get the tag name of the heading (h1, h2, etc.)
        const tag = $(this).prop("tagName");
        // Extract the numeric part of the tag name to determine the heading level
        const level = parseInt(tag.replace(/[^0-9]/g, ''));
        // Get the text content of the heading
        const text = $(this).text();
        // Generate an anchor by replacing non-alphanumeric characters with hyphens and converting to lowercase
        const anchor = text.replace(/[^a-z0-9\s]/gi, '').replace(/\s+/g, '-').toLowerCase();
        
        // Add the anchor as an ID to the heading element for linking
        $(this).attr('id', anchor);
        
        // Create an item object with the text, level, anchor, and an empty subheadings array
        const item = { text: text, level: level, anchor: anchor, subheadings: [] };

        // Find the appropriate parent hierarchy for the current item
        const parentHierarchy = findParent(level, hierarchy);
        // Add the current item to the parent hierarchy
        parentHierarchy.push(item);
    });

    // Function to generate a nested ordered list from the hierarchical structure
    function generateList(hierarchy) {
        // Create a new ordered list element
        const ol = $("<ol></ol>");
        // Loop through each item in the hierarchy
        hierarchy.forEach(item => {
            // Create a list item element
            const li = $("<li></li>");
            // Create a link element pointing to the anchor of the heading
            const a = $("<a></a>").attr("href", `#${item.anchor}`).text(item.text);
            // Append the link to the list item
            li.append(a);
            // If the item has subheadings, recursively generate their nested list and append it to the list item
            if (item.subheadings && item.subheadings.length > 0) {
                li.append(generateList(item.subheadings));
            }
            // Append the list item to the unordered list
            ol.append(li);
        });
        // Return the constructed unordered list
        return ol;
    }

    // Generate the list from the hierarchical structure
    const list = generateList(hierarchy);
    // Append the generated list to the div with the id "hierarchical-list"
    $("#hierarchical-list").append(list);
});