javascript - 仅当图像具有 .landscape 类时，如何将类添加到容器 div？

Question

使用 jQuery，我希望能够向容器 div (.figure-left) 添加一个新类，前提是其中的图像具有 .landscape 类

我正在使用在CSSnewbie.com上找到的一个很棒的脚本。使用图像的 Alt 标签作为标题 - 当我使用的 CMS 不支持图像标题时非常有用。

我的基本脚本正在运行，并且我已经设置了 CSS 样式，因此即使关闭 Javascript，布局也不会中断。我无法上类的是我的“补充”:)

我已将“if”部分添加到下面的脚本中，部分有效。它将一个名为“NEW-CLASS”的类添加到包含的 div (.figure-left) 中。

不幸的是，它为每个 div 添加了 .NEW-CLASS (.figure-left)。似乎忽略了“if”位？我只想要一个类添加到 div (.figure-left) 如果里面有一个带有 .landscape 类的图像

HTML:

<div class="figure-left">
<img alt="This is the caption" class="caption left landscape" 
height="413" src="/img/resources/photo.jpg"
width="620"><p class="caption">This is the caption</p>
</div>

脚本:

$(document).ready(function() {
$("img.caption.left").each(function() {
    $(this).wrap('<div class="figure-left"></div>')
    .after('<p class="caption">'+$(this).attr("title")+'</p>')
    .removeAttr('title');
    if ($('img').hasClass('landscape')) {
    $('.figure-left').addClass('NEW-CLASS');}
    });

非常感谢您的帮助，整个早上都在摸不着头脑!:)

在此示例中我仅使用 .NEW-CLASS。

Answer 1

我建议完全跳过if，并选择相关图像(带有您正在测试的类名)，然后找到最接近的.figure-left 并添加类:

$('img.landscape').closest('.figure-left').addClass('NEW-CLASS');

但是您自己的代码的问题是您选择了 if 内的所有 .figure-left 元素，因此，相反，您应该使用:

if ($(this).hasClass('landscape')) {
    $(this).closest('.figure-left').addClass('NEW-CLASS');
}

在此示例中，$(this) 引用当前元素(img)并测试它是否具有 landscape 类名;如果是，那么 jQuery 会找到该 img 元素的祖先中最接近的 .figure-left 元素，并添加 NEW- CLASS 类名。

引用文献:

• addClass() .
• closest() .
• hasClass() .