Hey Mates,
I have recently started working with jQuery and i have to admit is is a must have for any web dev.
So far everything I needed, I was able to do with the tutorials and from the numerous forums.
Today poses another challenge, which i am hoping someone can help me with.
I need to be able to wrap around an image with an anchor tag using the link that is just below it.
The structure is
-----------------------------------------------------------------------
<div id="main">
<div>
<img... />
<a href="asd">ABC</a>
</div>
<div>
<img... />
<a href="zxc">ABC</a>
</div>
<div>
<img... />
<a href="fgh">ABC</a>
</div>
<div>
<img... />
<a href="oiu">ABC</a>
</div>
</div>
-------------------------------------------------------------------------------------
Required end result
<div id="main">
<div>
<a href="asd"><img... /></a>
<a href="asd">ABC</a>
</div>
<div>
<a href="zxc"><img... /></a>
<a href="zxc">ABC</a>
</div>
<div>
<a href="fgh"><img... /></a>
<a href="fgh">ABC</a>
</div>
<div>
<a href="oiu"><img... /></a>
<a href="oiu">ABC</a>
</div>
</div>
I cannot change the structure directly only though JQuery. I wrapped the img in an anchor tag and then tried to find a solution.
I have tried a few combinations this was the only one that met with some success
jQuery('#main div').each(function(){
jQuery('#main div a:nth-child(2)').attr('href',jQuery('#main div a:nth-child(1)').attr('href'));
});
It set the href on all images with the href of first link
I would appreciate some help, as i am at my wits end. I just cant see the obvious solution, though i feel it is right in front of me!!
jQuery('#main div').each(function(){
jQuery(' this elements second anchor tag ').attr('href',jQuery( this elements first anchor tag).attr('href'));
});
Thanks
Austin