append two different <div> tag to two different <image> tag

2 Views

I am working with woocommerce plugin in wordpress.

My html code is:

Read More
<ul class="products">
<li>
   <a href="http://localhost/watch/product/88-rue-du-rhone/">
       <img class="attachment-shop_catalog wp-post-image" width="300" height="300" alt="88-rue-du-rhone_87wa120050_sku_402729_usp_30676" src="http://localhost/watch/wp-content/uploads/2015/08/88-rue-du-rhone_87wa120050_sku_402729_usp_30676.jpg">

       <img class="secondary-image attachment-shop-catalog" width="300" height="300" alt="88-rue-du-rhone_87wa120050_sku_402729_usp_30679" src="http://localhost/watch/wp-content/uploads/2015/08/88-rue-du-rhone_87wa120050_sku_402729_usp_30679.jpg">
   </a>
</li>
</ul>

Now, I have to add two different to the two different image tag using jQuery. So what code should I have to write?

My jQuery code is : 

$(document).ready(function () {
   $(".products li a").append($("<div class='main-img'></div>");
});

But div is not added.

Post Views: 2

Related posts

2 comments

  1. If you are trying to wrap each image in a div, try the below js

    $(document).ready(function () {
   $(".products li a img").wrap($("<div class='main-img'></div>"));
});

  2. So, you wanted to wrap each image inside of a. You may do so with the following.

    $(".products li a > img").filter(function() {
    $(this).wrap("<div class='main-img'></div>");
});

    OR

    $(".products li a > img").wrap("<div class='main-img'></div>");

    A Demo

    More about .wrap()

Comments are closed.