CODEWITHSUNDEEP
jqueryhtml
Ben Williams
Ben Williams

Reputation: 1

Problems adding HTML .before .after an img with JQuery - JQuery closing tags

Alright, so I am trying to close up an img within a (I know, I know... not my template) using JQuery. What is happening is this - JQuery is closing the tag I am adding with the .before... I don't want it closed until the .after I am adding... I really am struggling with this. Any help would be appreciated. I've tried .prepend/.append, and .wrap...

here is the code...

$(document).ready(function(){
$("img.bottomShadow").each(function(){
    var imageWidth = $(this).attr("width");
    var width = imageWidth + 10;
        $(this).before("<span class='image_shadow_container'>");
        $(this).after("<img class='noimgbg' alt='' src='images/image_shadow.png' width='" + width + "'></span>");
});

});

What I want is is this: 

<span class="image_shadow_container">
                                        <img src="images/fwidth_img_3.jpg" class="image_shadow" alt="" />
                                        <img src="images/image_shadow.png" alt="" width="300" class="noimgbg" />

                                    </span>

What I get is this...

   <span class="image_shadow_container"></span>
<img class="bottomShadow" width="160" height="128" alt="" src="images/newsimages/smallben.jpg">
<img class="noimgbg" width="170" src="images/image_shadow.png" alt="">

With the span being closed "early" by Jquery... any ideas?

Upvotes: 0

Views: 713

Answers (2)

pmaruszczyk
pmaruszczyk

Reputation: 2155

First build all your html code into string, and then use JQuery to put it.

Upvotes: 0

Blender
Blender

Reputation: 298176

You have to .wrap(), not use a .before(), as jQuery parses and corrects the unclosed tags:

$("img.bottomShadow").each(function(){
    var imageWidth = $(this).attr("width");
    var width = imageWidth + 10;

    $(this).wrap("<span class='image_shadow_container' />");
    $(this).after("<img class='noimgbg' alt='' src='images/image_shadow.png' width='" + width + "'></span>");
});

Upvotes: 2

Related Questions