Javascript 附加两个不同的<；部门>；标记为两个不同的<；图像>；标签

我正在WoodPress中使用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>");
});

$（文档）.ready（函数（）{
$（“.products li a”）。追加（$（“”）；
});

---

但是没有添加div。

因此，您希望将每个图像包装在

a

中

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

$（“.products li a>img”）.filter（函数（）{
$（this.wrap（“”）；
});

或

$（“.products li a>img”）.wrap（“”）；

---

有关

的更多信息如果您试图将每个图像包装在一个div中，请尝试下面的js

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

$（文档）.ready（函数（）{
$（“.products li a img”）.wrap（$（“”）；
});

您的标题似乎与您的代码所做的不同。请注意，您的标题所说的您正在尝试做的事情（在

img

中放置

div

）是不可能的。jQuery示例中的问题是缺少

）

。修正这个问题，你的代码在

a

后面附加一个

div

应该可以工作。请注意，您需要在

.main img

div中放置一些内容，以便它在页面中实际显示：您的选择器和HTML不匹配。类“products”似乎没有任何内容，是否缺少代码？是否要将每个图像包装在一个div中？如果是，请相应地编辑您的问题标题，以便更清楚地了解您的目的。

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