Learning jQuery

To put link of the image, we normally use <a> tag that contains image tag to show the image. But assume there are 100 images and you need same link for every single image. Putting 100 <a> tag with each image is time consuming and cumbersome. It would be nice if single <a> tag can be used for all the images and put the <a> tag dynamically. Well, no worry when there is jQuery.

jQuery provides a method named "wrap()", which can be used to insert any HTML structure in set of matched elements. In simple words, if you want put wrapper around your div element then you can use wrap() method. For example, you have a div with ID "Child".

<div id="Child"></div>

And want to wrap this div with any parent then you can use "wrap()" method to insert HTML.

$('#Child').wrap('
');

Output:

<div id="parent">
  <div id="child"></div>
</div>

Same way, we will use the wrap() method to insert hyperlink to image tag so that the image becomes clickable. See below.

$(document).ready(function() {
    $("#imgLogo").wrap('');
});

In this example, I have used ID as selector but you can use class selector to find all the images with same class and then wrap them with <a> tag. You can also assign target="_blank" in the above <a> tag to open the link in new window.

Also read, "How to Zoom image on mouseover using jQuery".

Feel free to contact me for any help related to jQuery, I will gladly help you.