Question

我正在使用wordpress中的woocommerce插件。

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

现在，我必须使用jQuery为两个不同的图像标记添加两个不同的颜色。那么我应该编写什么代码？

我的jQuery代码是：

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

但不添加div。

Answer 1

如果您尝试将每个图像包装在div中，请尝试以下js

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

Answer 2

因此，您希望将每个图像包装在a内。你可以这样做。

$(".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

有关.wrap()

的更多信息

将两个不同的<div>标记附加到两个不同的<img/>标记

2 个答案: