Mit JQuery DIV terminieren

chris4712

Erfahrenes Mitglied
Hallo!

Ich packe es einfach nicht einen DIV Element mit JQuery zu terminieren. Damit ihr versteht was ich meine, muss ich leider ein wenig ausholen.
Es geht um Wordpress bzw. dass ich dafür grade ein Theme baue.

Ich habe, folgenden Code (durch den Seiten Editor erzeugt):
HTML:
<div class="entry-content">
    <p>Ich bin der Text</p>
    <p>Noch mehr Text</p>
    <p>
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
    </p>
::after
</div>

Alle Elemente mit der Klasse SliderGallery werden in einen DIV gepackt.

Das macht dieser Code:
Code:
$(".SliderGallery").wrapAll("<div class='owl-carousel'>");

Das Resultat ist nun folgendes:
HTML:
<div class="entry-content">
  <p>Ich bin der Text</p>
  <p>Noch mehr Text</p>
  <p>
    <div class='owl-carousel'>
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
      <img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
    </div>
  </p>
  :: after
</div>

Nun entferne ich mit
Code:
$('.owl-carousel').unwrap('<p>');
noch den <p> Tag der den DIV Container umschießt.

Das war der einfache Teil, nun kommt mein Problem:
Der DIV mit der Klasse entry-content soll vor dem DIV owl-carousel aufhören und danach wieder anfangen.
Gewünschtes Resultat:
HTML:
<div class="entry-content">
  <p>Ich bin der Text</p>
  <p>Noch mehr Text</p>
</div>
<div class='owl-carousel'>
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
</div>
<div class="entry-content">
  [hier steht dann wieder was]
</div>

Hab es mit
Code:
    $('.owl-carousel').before('</div>');
    $('.owl-carousel').after('<div class="entry-content">');
versucht, aber das er hebt den DIV einfach nicht auf.

Kurz noch warum ich das ganze so aufbauen möchte:
entry-content hat eine Breite von 80% der DIV owl-carousel soll aber 100% Seitenbreite haben. Viewport geht nicht, da ich sonst ja einen horizontalen Scroll Balken habe.

Bin um jede Idee dankbar.
Grüße

Christian
 
Wie wäre es, wenn du das DIV mit der Klasse owl-carousel aus dem DOM-Tree löst und es nach dem DIV mit der Klasse entry-content einfügst.
Anschließend Clonst du das DIV mit der Klasse entry-conten, leerst es und fügst es nach dem DIV mit der Klasse entry-content wieder an.
 
Wie wäre es, wenn du das DIV mit der Klasse owl-carousel aus dem DOM-Tree löst und es nach dem DIV mit der Klasse entry-content einfügst.
Anschließend Clonst du das DIV mit der Klasse entry-conten, leerst es und fügst es nach dem DIV mit der Klasse entry-content wieder an.

Das geht leider nicht. Schau mal:
HTML:
<div class="entry-content">
  <p>Ich bin der Text</p>
  <p>Noch mehr Text</p>
<div class='owl-carousel'>
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild01.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild02.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild03.jpg">
  <img class="SliderGallery alignright wp-image-408 size-medium" src="bild04.jpg">
</div>
  <p>Und noch mehr Text</p>
  <p>Und noch mehr Text</p>
</div>

Kann ja auch vorkommen.
 
Dann Klone doch das DIV entry-content.
Füge den Klon nach dem Original ein.
Im Original löschst du alle Inhalte ab dem DIV owl-carousel.
Im Klon löschst du alle Elemente bis zum DIV owl-carousel.
Anschließend entfernst du das DIV owl-carousel aus dem DOM Tree im Klon und platzierst es nach dem ersten DIV entry-content ein.

Die JQuery Funktion insertAfter() sollte dabei helfen.
 
Bin nach vielem hin und her grade dazu übergegangen ist mit einer WP Funktion zu lösen:
PHP:
function carousel_shortcode( $atts, $content = null ) {
  $returncode  = '</div>';
  $returncode .= '<div class="owl-carousel">' . $content . '</div>';
  $returncode .= '<div class="entry-content">';
  return $returncode;
}
add_shortcode( 'carousel', 'carousel_shortcode' );

Nun muss man im WP Editor halt den Shortcode [carousel] gefolgt von den Bildern und einem schließenden [/carousel] eingeben.
Geht auch, auch wenn es für den User etwas gewöhnungsbedürftig ist ;)
 
Zurück