Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit Hilfe von jQuery lassen sich Elemente von anderen Elementen umschließen. Das ist immer dann hilfreich, wenn ihr keine Möglichkeit habt an den HTML-Code zu gelangen oder ihn aus anderen Gründen nicht bearbeiten wollt. In diesem Beitrag stellen wir euch ein jQuery-Snippet zur Verfügung, mit dem ihr alle Elemente, die zwischen zwei bestimmten Elementen liegen, mit HTML-Code umschließen könnt.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Der Ausgangscode

Als Ausgangscode für unser Beispiel verwenden wir einen typischen HTML-Inhalt mit Überschriften (<h2>, <h3>), Absätzen (<p>), Grafiken (<img>) und verschachtelten Elementen (<span> und <a>), wie er häufig auf Internetseiten vorkommt.

<main class="content">
  <h2>Ich bin eine Überschrift</h2>
  <p>Ich bin ein Absatz voll mit Inhalt.</p>
  <p>Ich bin ein <span>weiterer Absatz</span> voll mit Inhalt</p>
  <img src="test.jpg" alt="Testbild" />
  <h3>Ich bin eine Zwischenüberschrit</h3>
  <p>Ich bin noch ein Absatz, aber ich habe einen <a href="#" title="Beispiellink">Link</a> in mir.</p>

  <h2>Ich bin die zweite Überschrift</h2>
  <p>Ich bin ein Absatz voll mit Inhalt.</p>
  <p>Ich bin ein <span>weiterer Absatz</span> voll mit Inhalt</p>
  <img src="test.jpg" alt="Testbild" />
  <h3>Ich bin eine Zwischenüberschrit</h3>
  <p>Ich bin noch ein Absatz, aber ich habe einen <a href="#" title="Beispiellink">Link</a> in mir.</p>
</main>

Das jQuery-Snippet

Mit Hilfe des folgenden jQuery-Snippets legt ihr fest, das alle Elemente die zwischen zwei <h2>-Überschriften liegen mit einem <div>-Container umschlossen werden. Dieser Container erhält in unserem Beispiel die Klasse .element-wrapper.

Das Snippet funktioniert folgendermaßen: Es werden alle <h2>-Überschriften mit Hilfe einer each-Schleife gezählt und festgelegt, dass alle Elemente danach, bis zur nächsten <h2> (.nextUntil()) angesprochen werden sollen. Anschließend werden diese Elemente mit Hilfe von .wrapAll() mit einem <div>-Container umschlossen.

$('h2').each(function () { 
 $(this).nextUntil('h2').wrapAll('<div class="element-wrapper"></div>'); 
});

Wichtiger Hinweis

Um das in diesem Beitrag gezeigte Ergebnis zu erreichen, müsst ihr mit .wrap() bzw. wrapAll() arbeiten. Die jQuery-Funktionen .after(), .before(), .append() oder .prepend() mit deren Hilfe Ihr Code-Snippets vor oder nach einem bestimmten Element hinzufügen könnt, funktionieren hier leider nicht. Das hängt damit zusammen, das diese Funktionen immer einen semantisch abgeschlossen HTML-Code enthalten müssen. Ihr könnt also nicht, mit Hilfe von .after('h2') einen öffnenden <div> einfügen und vor der nächsten <h2> mit .before('h2') diesen wieder schließen.

Das Ergebnis

Euer Ergebnis sollte dann wie im folgenden Code-Beispiel aussehen. Alle <h2>-Überschriften stehen separat im Inhalt. Alle anderen Elemente sind – bis zur nächsten <h2> – mit einem <div>-Container umschlossen, der wiederum die Klasse .element-wrapper erhalten hat.

<main class="contant">
  <h2>Ich bin eine Überschrift</h2>
  <div class="element-wrapper">
    <p>Ich bin ein Absatz voll mit Inhalt.</p>
    <p>Ich bin ein <span>weiterer Absatz</span> voll mit Inhalt</p>
    <img src="test.jpg" alt="Testbild" />
    <h3>Ich bin eine Zwischenüberschrit</h3>
    <p>Ich bin noch ein Absatz, aber ich habe einen <a href="#" title="Beispiellink">Link</a> in mir.</p>
  </div>

  <h2>Ich bin die zweite Überschrift</h2>
  <div class="element-wrapper">
    <p>Ich bin ein Absatz voll mit Inhalt.</p>
    <p>Ich bin ein <span>weiterer Absatz</span> voll mit Inhalt</p>
    <img src="test.jpg" alt="Testbild" />
    <h3>Ich bin eine Zwischenüberschrit</h3>
    <p>Ich bin noch ein Absatz, aber ich habe einen <a href="#" title="Beispiellink">Link</a> in mir.</p>
  </div>
</main>

Ein Praxisbeispiel, das Accordion

Das oben beschriebene Beispiel könnte für euch von Interesse sein, falls ihr z.B. ein Accordion aus einem bestehenden Inhalt erzeugen wollt.
Folgender jQuery-Code erzeugt euch alle notwendigen Klassen und Container, die ihr benötigt um ein funktionsfähiges Accordion zu erzeugen.
Einen ausführlichen Artikel über das jQuery-Accordion findet ihr hier.

$('.content').addClass('accordion');
$('h2').addClass('accordion-trigger');
$('h2').each(function () {
  $(this).nextUntil('h2').wrapAll('<div class="accordion-content"></div>');
});

Beispiel anzeigen

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 1 Kommentar

  1. Eva
    schrieb am 14.11.2018 um 17:07 Uhr:

    Hi,
    das ist ziemlich super, genau was ich bräuchte, nur sollte das zusätzliche div bei mir nicht um die h2 Elemente sondern in einer UL-Navigation um jedes Element, das wie folgt aussieht:

    Um diese Listen bräuchte ich jeweils ein
    Wie würde der Code denn dazu aussehen?
    Vielen Dank für einen Tipp!
    Schöne Grüße
    Eva

    Antworten

Schreibe einen Kommentar zu Eva Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →