Question

使用jQuery我希望能够在容器div（.figure-left）中添加一个新类，只要其中的图像具有.landscape类

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

我的基本脚本正常工作，我设计了CSS样式，因此如果关闭Javascript，布局不会中断。我无法开始工作的是我的'添加'：）

我已将“ if ”部分添加到下面的脚本中，部分正常工作。它在包含div（.figure-left）中添加了一个名为“NEW-CLASS”的类。

不幸的是，它为每个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并添加类：< / p>

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

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

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

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

参考文献：

如果图像有一个类.landscape，如何将类添加到容器div？

1 个答案: