Add a div class parent to img and iframes with exception for blockquotes

Question

I'm using these jQuery snippets:

$(".post img").each(function(){ $(this).wrap('<div class="fwparent" />'); });
$(".post iframe").each(function(){ $(this).wrap('<div class="fwparent" />'); });

To wrap my images and iframes with the fwparent div class. But now I need them to make exceptions for blockquotes.

It looks like this now:

<div class="post">
...
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
...
<blockquote>
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
</blockquote>
...
</div>

But I want it to look like this:

<div class="post">
...
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
...
<blockquote>
<img src="image.png">
<iframe src="movie">
</blockquote>
...
</div>

Does anyone know how to achieve this?

Answer 1

You can try this code rather :

$(".post img, .post iframe").each(function(){
    if ($(this).parent().prop('tagName') != 'BLOCKQUOTE') {
        $(this).wrap('<div class="fwparent" />');
    }
});

The code checks if the parent of the current element is a blockquote, and if it's not, it wrap this element. The code uses also the prop method.

Answer 2

You can give this a shot:

$(".post > img").each(function(){ $(this).wrap('<div class="fwparent" />'); });
$(".post > iframe").each(function(){ $(this).wrap('<div class="fwparent" />'); });

Or a shorter version:

$(".post > img, .post > iframe").each(function(){ 
   $(this).wrap('<div class="fwparent" />'); 
});