Alle Elemente zwischen zwei Elementen mit Hilfe von jQuery umschließen

Von kulturbanause Team

In diesem Beitrag zeigen wir euch, wie ihr mit Hilfe von jQuery alle Elemente die sich zwischen zwei bestimmten Elementen befinden umschließen könnt.

Aktualisiert am 24. September 2015 Ein Kommentar

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.

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

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.