如何添加一個類到一個容器div只有當圖像有一個.landscape類？

Question

使用jQuery我希望能夠到一個新的類添加到div容器（。圖左）只有在其中的圖像具有一流的.landscape

我使用的是一個偉大的我在CSSnewbie.com上找到了腳本，它使用圖像的Alt標籤作爲標題 - 當我使用的CMS不支持圖像標題時非常有用。

我有基本腳本工作，我已經風格的CSS，所以佈局將不會打破，如果Javascript關閉。我不能去上班位是我的「添加」 :)

我已經添加了「如果」部分下面的腳本，這部分工作。它向包含的div添加一個名爲'NEW-CLASS'的類（.figure-left）。

不幸的是，它爲每個div添加了.NEW-CLASS（.figure-left）。它似乎忽略了'如果'位？我只想要一個類增加DIV（。圖左），如果裏面有一類的形象.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'); 

然而用自己的代碼的問題是，你是選擇所有的.figure-left的if內的元素，所以，相反，你應該使用：

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

在此示例中，$(this)引用當前元素（img）並測試它是否具有landscape類名;如果確實是，那麼jQuery將找到最接近.figure-left元素的那個img元素的祖先，並添加NEW-CLASS類名。

參考文獻：

• addClass()。
• closest()。
• hasClass()。