jQuery replaceWith() trouble

Question

I'm trying to reset flash content within my slider powered by jQuery Cycle Plugin.

What I want to do:

• replace every ".flash" in previous ".slide" with an empty div,
• replace created empty div with previous .flash data.

I know this sounds stupid, but it's an amazing way of resetting working flash content, the best alternative (removing and appending) causes a lot of styling issues, and I don't want to use any swfobject.js and other APIs. Of course hiding isn't an option also.

Everything works perfectly using "after" callback provided by Cycle Plugin, but somehow I'm not able to retrieve the original .flash content, the last line of my callback function just simply does nothing and .flash is being replaced with empty div permanently:

jQuery("#slider").cycle({
  after: callbackAfter,
});

function callbackAfter(){
   var FlashContent = jQuery(this).prev('.slide').find('.flash'); //find any flash content in previous slide
   var FlashContentHolder = jQuery("<div></div>"); //place empty div instead
   FlashContent.replaceWith(FlashContentHolder ); //replace the flash content with empty div
   FlashContent.replaceWith(FlashContent); //This doesn't work - replace the empty div with stored flash content
}

The issue is the last line that does not display original FlashContent.

I was trying to set FlashContent & FlashContentHolder variables out of the function to change scope, but that's not the point, I guess the first line is the issue, because I'm removing something then searching for it, so I'm getting nothing in return?

This function works and does exactly what I need (but doesn't display .flash videos in original positions, and I can't use absolute positioning):

function callbackAfter(){
   var stopFlash = jQuery(this).prev('div').find('.flash').remove();
   jQuery(this).prev('div').append(stopFlash); 
}

This actually works with small issue (see above).

Any ideas?

Answer 1

After you call

FlashContent.replaceWith(FlashContentHolder);

FlashContent doesn't exist in the DOM tree anymore so you can't replace it with anything else. You probably want to change your last line to:

FlashContentHolder.replaceWith(FlashContent);