CODEWITHSUNDEEP
jqueryinsertelement
Angie
Angie

Reputation: 899

jQuery inserting element .before() and .after() does not work as expected, what am I doing wrong?

I am trying to dynamically surround sets of IMG and A tags with a div tag but am unable to make it work.

my html: 

<img class="myClass-1" src="img5" />
<a class="myClass-2" href="url"></a>

my script: 

$('img.myClass-1').each(function(){
   $(this).before('<div style="position: relative;">');
   $(this).next().after('</div>');
});

my Firebug outcome: 

<div style="position: relative;"/>
<img class="myClass-1" src="img5" />
<a class="myClass-2" href="url"></a>

What I am trying to accomplish: 

<div style="position: relative;">
<img class="myClass-1" src="img5" />
<a class="myClass-2" href="url"></a>
</div>

I replaced 

$(this).next().after('</div>');

with 

$(this).next().after('<p>test</p>');

just to see if it was unable to execute the .next().after() code but it works fine. I am new to using jQuery and can't figure out what I'm doing wrong. Can somebody help? Please.

Upvotes: 3

Views: 766

Answers (2)

Alex Heyd
Alex Heyd

Reputation: 1333

You could also get rid of the each() (or just replace this with your selector in Nick's snippet):

$('img.myClass-1').next().andSelf().wrapAll('<div style="position: relative;" />');

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630379

You can use .wrapAll(), like this:

$(this).next().andSelf().wrapAll('<div style="position: relative;" />');

You can test it out here, this takes <img> and <a> then wraps them both in that <div> container.

Upvotes: 3

Related Questions