Alle Elemente zwischen zwei Elementen mit Hilfe von jQuery umschließen
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.
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>');
});
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