JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<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>

CSS

.main-img {
    border: 2px solid green;
}

JavaScript

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