Ausführen owl-Karussell Skript nach jQuery replaceWith() -Methode (DOM-Elemente Ersatz)

Question

Here is my jsFiddle

Auf Dokument bereit Ich möchte:

1. 3 divs ersetzen (mit Klassen: 'one', ' zwei ',' drei '') mit 3 divs (jeweils mit der gleichen Klasse 'smilling') mit jQuery replaceWith() -Methode,

2. Führen Sie das Eulen-Karussell-Plugin.

Ich weiß nicht, warum, aber obwohl dom Ersatzelemente tun erfolgreich Eule-Karussell gehen wird .. Irgendwelche Vorschläge nicht geladen werden? Warum möchte ich das tun? Es hat etwas mit MediaQueries zu tun ...

Meine jQuery:

$(document).ready(function() { 

    $("div.super").replaceWith('<div class="smilling item"></div><div class="smilling item"></div><div class="smilling item"></div>'); 

$('.owl-carousel').owlCarousel({ 
        loop:false, 
        nav:true, 
        items:1 
       }); 

}); 

Answer 1

Das Problem ist, Sie ersetzen die .super-Klasse replaceWith(). Was Sie tun möchten, ist alle Kinder der .super Klasse zu ersetzen.

Stattdessen rufen Sie replaceWith() auf .item und statt drei neue Divs nur ein neues div.

So etwas wie dies funktioniert:

$(document).ready(function() { 

$("div.item").replaceWith('<div class="smilling item"></div>'); 

$('.owl-carousel').owlCarousel({ 
       loop:false, 
       nav:true, 
       items:1 
      }); 

});