Ich hatte da mal eine Idee für diese meine Seite um automatisch ein Inhaltsverzeichnis basierend auf den heading Tags (h1 - h6) zu erstellen, welches man auf jeder HTML-Seite benutzen kann, egal welches System zugrunde liegt.
Ich hab dann irgend einen halben Tag lang selber versucht was zusammen zu basteln aber kam einfach nicht auf die Logik um die Liste zusammen zu stellen.
Dann dachte ich "Hey, frag doch mal ChatGPT!" und es hat mir dann den Code für die Funktion generateList(hierarchy) ausgespuckt.
Nach bisschen Hin und Her und Feintuning hat die KI dann den unten angezeigten Code ausgespuckt.
Wie das ganze dann aussieht könnt ihr auf der gesamten Seite sehen.
Ich habe aber in diesem Artikel ganz unten ein paar Dummy Headings hinzugefügt.
Ausserdem habe ich das CSS auch leicht angepasst.
CSS
#hierarchical-list ol { counter-reset: item }
#hierarchical-list li{ display: block }
#hierarchical-list li:before { content: counters(item, ".") " "; counter-increment: item }jQuery Code
$(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);
});