如何将 img 类添加到周围的 div答案

【问题标题】：How to the add the img class to the surrounding div如何将 img 类添加到周围的 div
【发布时间】：2013-01-25 11:56:09
【问题描述】：

我有一个 img，它被包装在一个 div 容器中。现在我想将 img 类添加到周围的 div 中。我怎样才能用 jQuery 完成这个？

<div class="imagecontainer">
  <div class="imagebackgroud"></div>
  <div class="imageicon"></div>
  <img class="aligncenter">
</div>

.imagebackground 和 .imageicon div 可以忽略，我想将 img 类“.aligncenter”添加到 .imagecontainer div。

【问题讨论】：

【解决方案1】：

$(".imagecontainer").addClass($('.imagecontainer img').attr("class"));

这假设容器中有一个图像。

$(".aligncenter").parent().addClass("aligncenter");

这假设图像有一个 aligncenter 类，并且只是将相同的已知类放在父级上。

或者你可以使用 find:

$(".imagecontainer").addClass($(".imagecontainer").find('img').attr("class"));

编辑好的，根据您的评论...

$("img.aligncenter").parent().addClass("aligncenter")

应该可以。它针对所有具有“aligncenter”类的图像，然后将该类添加到父级。虽然这看起来非常接近示例 2，但它以这种方式专门针对具有类 aligncenter 的图像。

这是一个小提琴工作： http://jsfiddle.net/U5vRe/

【讨论】：

感谢 Kai，代码 1 和 3 正在工作，但我忘了提一件事：img 有几个类，我怎样才能只将类“aligncenter”添加到 div？目前它正在添加所有类。
它还将 .aligncenter 类应用于所有 .imagecontainer div。它应该只将 .aligncenter 添加到具有类 .aligncenter 的 img 的 div 中。因为现在所有 div，即使是没有 .aligncenter img 的 div 都获得了 .aligncenter 类，因此是 floatet，这是不应该的。我希望那不会太混乱：s
我添加了一个更新，尽管它与 #2 非常相似，应该可以工作。根据我有限的数据集，我附上了一个小提琴。
根本无法让 parent() 工作。它只是不抓住 div。任何机会只使用您提供的第三个 sn-p 复制 .aligncenter -> $(".imagecontainer").addClass($(".imagecontainer").find('img').attr("class")) ;
您使用的是什么版本的 jquery？ .parent() 应该没有理由不起作用。

【解决方案2】：

试试这个：

$('img.aligncenter').parent().addClass('aligncenter');

否则：

$('.imagecontainer').addClass('aligncenter');

【讨论】：

我也尝试使用parent() 定位 div，但它不起作用。我不能使用第二个代码，因为并非所有img 都有 aligncenter 类。我只想将类 .aligncenter 添加到其图像具有此类的 div 中。

【解决方案3】：

试试看：） http://jsfiddle.net/nlphuong/xm38X/

$(document).ready(function(){
    $("img").parent("div").addClass($("img").attr("class"));
});

ps：首先尝试使用 jsFiddle :))

【讨论】：

我已经更新了我的 jsFiddle。最接近，它仍然有效：-？您的（萤火虫）控制台上是否有任何 javascript 错误？
我可以看到它在您的 jsfiddle 中工作，但在我的网站上却没有。这是为什么？我也使用 jquery 1.8.3
使用 firefox 然后按 Ctrl+Shift+J 看看您的站点是否有任何脚本错误，然后尝试使用简单的脚本：alert(typeof jQuery);检查您的 jquery 是否已加载。
我用 Firefox 和 chrome 控制台检查，没有错误。我还在同一页面上使用了 fancybox，它与 jquery 一起工作正常。
你最近（）正在工作。非常感谢，只是我的一个错字，哈哈。