Pixelbart

jQuery: Alle Überschriften aus einem Container erhalten

Heute geht es um jQuery und wie man alle Überschriften aus einem Container erhalten kann. Dies ist vor allem nützlich, wenn man ein Inhaltsverzeichnis mit jQuery erstellen möchte. Die genannte Methode funktioniert nur mit jQuery und ist kein Teil von CSS, weshalb die Performance etwas darunter leidet. Dafür gibt es aber auch einen Tipp.

Der Selektor

Der Selektor zum Ausfindigmachen von Überschriften lautet :header. Damit werden alle Überschriften innerhalb eines Elements erhalten. Ein Beispiel könnte so aussehen:

(function($) {

    $(".post-content").find(":header");

})(jQuery);Code-Sprache: JavaScript (javascript)

Wie schon erwähnt, ist dies kein CSS-Selector, weshalb man hier nur mit find, oder ähnlichen jQuery Funktionen arbeiten kann. Wenn du jetzt nur Überschriften erhalten möchtest, die ein id-Attribut haben, kannst du folgendes machen:

(function($) {

    let headings = $(".post-content").find(":header");
    let results = [];

    if (headings.length > 0) {
        $.each(headings, function(index, heading) {
            if ($(heading).attr("id")) {
                results.push(heading);
            }
        });
    }

    console.log(results);

})(jQuery);Code-Sprache: JavaScript (javascript)

Wir erstellen hier erst einen leeren Array, den wir dann mit den Ergebnissen befüllen. Im Anschluß durchlaufen wir die Überschriften, die wir gefunden haben und prüfen ob ein id-Attribut vorhanden ist; wenn ein Attribut vorhanden ist, packen wir die Überschrift in den neuen Array, den wir zum Schluß dann mit console.log() ausgeben.

Performance

Da es sich um keinen CSS-Selektoren, sondern um eine jQuery-Extension handelt, gibt es hier zum Teil Probleme mit der Performance. Um dies zu beheben, oder zu umgehen, kann man den Selektoren auch filtern:

(function($) {

    $(".post-content").filter(":header");

})(jQuery);Code-Sprache: JavaScript (javascript)

Das soll die Performance-Probleme beheben. Ich selbst, konnte das nicht testen und habe diese Methode in der Dokumentation des Selektors auffinden können.

In

,