von $ verwenden (dies) und .not

Question

Ich habe diesen Code geschrieben und es ordnungsgemäß funktioniert:

HTML:

<div class="service-box"> 
    <!--Services Title 1--> 
    <h3>WordPress installation</h3> 
    <!--Content for title 1--> 
    <div class="service-content"> 
    <!--Your youtube service video iframe code--> 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe> 
    <!--Your service description--> 
    <p>I am offering services like:</p> 
    <p>WordPress installation to your already purchased domain and hosting.</p> 
    <p>Also I am able to create subdomain and install wordpress on it.</p> 
    <p>If You need me to make a WP backup, I can do that for You.</p> 
    <p>In case that You need me to restore your website from my previously made backup I am here for You.</p>  
    </div> 

JS:

$(document).on('click', '.service-box', function(){      
    $('#siteOverlay').addClass('overlay-active'); 
    $('#popupWindow').addClass('service-active'); 
    $('#popupWindow #contentBox').html($(this).html()); //I will change this line 
    $('body').css('overflow', 'hidden'); 
}); 

Dann Ich versuche, alles außer IFRAME-Tag wie folgt auszuwählen:

$('#popupWindow #contentBox').html($(this).not($('iframe')).html()); 

oder wie folgt aus:

$('#popupWindow #contentBox').html($(this).not('iframe').html()); 

und es funktioniert nicht. wie dies in allen Kombinationen nicht Selektor: Ich habe auch zu benutzen versucht

$('#popupWindow #contentBox').html($(this:not).html()); 

Nichts funktioniert. Gibt es jemanden, der die Antwort darauf weiß? Danke!

Answer 1

Sie möchten den iframe aus dem HTML des angeklickten Elements entfernen, nicht aus dem angeklickten Element selbst. also .... du musst es klonen und es aus dem Klon entfernen, dann anhängen.

var clone = $(this).clone(); 
clone.find('iframe').remove(); 
$('#popupWindow #contentBox').html(clone.contents()); 

Answer 2

Ist das was du willst?

var clone = $(this).clone(); 
clone.find('iframe').remove(); 
$('#contentBox').empty().append(clone); 

$(document).on('click', '.service-box', function() { 
 
    $('#siteOverlay').addClass('overlay-active'); 
 
    $('#popupWindow').addClass('service-active'); 
 
    var clone = $(this).clone(); 
 
    clone.find('iframe').remove(); 
 
    $('#contentBox').empty().append(clone); 
 
    $('body').css('overflow', 'hidden'); 
 
});

#siteOverlay { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: rgba(0,0,0,0.5); 
 
} 
 

 
#siteOverlay.overlay-active { 
 
    display: block; 
 
} 
 

 
#popupWindow { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    right: 50px; 
 
    bottom: 50px; 
 
    background-color: white; 
 
    padding: 50px; 
 
    overflow-y: scroll; 
 
} 
 

 
#contentBox { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="service-box"> 
 
    <!--Services Title 1--> 
 
    <h3>WordPress installation</h3> 
 
    <!--Content for title 1--> 
 
    <div class="service-content"> 
 
    <!--Your youtube service video iframe code--> 
 
    <iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe> 
 
    <!--Your service description--> 
 
    <p>I am offering services like:</p> 
 
    <p>WordPress installation to your already purchased domain and hosting.</p> 
 
    <p>Also I am able to create subdomain and install wordpress on it.</p> 
 
    <p>If You need me to make a WP backup, I can do that for You.</p> 
 
    <p>In case that You need me to restore your website from my previously made backup I am here for You.</p> 
 
    </div> 
 
</div> 
 
<div id="siteOverlay"> 
 
    <div id="popupWindow"> 
 
    <div id="contentBox"></div> 
 
    </div> 
 
</div>