将两个不同的 <div> 标签附加到两个不同的 <image> 标签答案

【问题标题】：append two different <div> tag to two different <image> tag将两个不同的 <div> 标签附加到两个不同的 <image> 标签
【发布时间】：2015-08-10 18:37:54
【问题描述】：

我正在使用 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。

【问题讨论】：

您的标题似乎与您的代码所做的不同。请注意，您的标题所说的您正在尝试做的事情（将div 放入img 中）是不可能的。您的 jQuery 示例中的问题是缺少 )。修复该问题，您的代码将div 附加到a 应该可以工作。请注意，您需要在 .main-img div 中添加一些内容，以使其在页面中实际可见：jsfiddle.net/ahxaofqh
您的选择器和您的 HTML 不匹配..
“产品”类似乎没有任何内容，是否缺少代码？
您想将每张图片包装在一个 div 中吗？如果是，请相应地编辑您的问题标题，以便更清楚地了解您的目标。

标签： javascript jquery html wordpress

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

或

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

A Demo

更多关于.wrap()

【讨论】：