kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.