Wrap <img> with a <div>, but if <img> has parent and is <a>, wrap anchor instead
<p>When wordpress adds an image to the post it wraps it up in an anchor tag. Like this:</p>

<pre><code>&lt;a href="link"&gt;&lt;img src="image" /&gt;&lt;/a&gt;
</code></pre>

<p>I would like to wrap the anchor with a div and add an overlay span after the image. Like this:</p>

<pre><code>&lt;div class="imagewrap"&gt;
   &lt;a href=""&gt;
     &lt;img src="image" /&gt;
     &lt;span class="overlay"&gt;&lt;/span&gt;
   &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>The following code does just that.</p>

<pre><code>$('#post a').has('img').wrap('&lt;div class="imagewrap" /&gt;').find('img').after('&lt;div class="overlay"&gt;&lt;/div&gt;');
</code></pre>

<p>However, when you add a linked image to a wordpress post it doesn't wrap the image in anchor tags and thus doesn't work. If there are no anchor tags, the image tag should be wrapped instead. Like this:</p>

<pre><code>&lt;div class="imagewrap"&gt;
     &lt;img src="image" /&gt;
     &lt;span class="overlay"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>Targeting the img tag is of course possible, but if so, the instances where the img tag has an anchor parent, the anchor doesn't get wrapped by the div. Any idea how to wrap the anchor if it has an img inside it, and if it doesn't it should just wrap the img tag instead?</p>

<p>Thanks in advance.</p>
