Here is the code snippet I am working with:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I am looking to dynamically add <a> tags before and after each image tag using jQuery. The desired output is:
<div id="slider">
<a href="http://www.google.com"><img src="images/p1.jpg" /></a>
<a href="http://www.google.com"><img src="images/p2.jpg" /></a>
<a href="http://www.google.com"><img src="images/p3.jpg" /></a>
</div>
Edit: More Details as per Comments
Here is what I have tried so far:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
This is how I have attempted to achieve the desired result:
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional Notes from Comments
I want to assign different URLs to each image as shown below:
<div id="slider">
<a href="google.com"><img src="images/p1.jpg" /></a>
<a href="yahoo.com"><img src="images/p2.jpg" /></a>
<a href="facebook.com"><img src="images/p3.jpg" /></a>
</div>