將類添加到包含一定寬度圖像的div中

Question

嗨，讓我從代碼開始。

<div class="nyhet"> <img src="#" width="785" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="390" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="785" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="390" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="785" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="390" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="785" class="attachement-full" /></div>
<div class="nyhet"> <img src="#" width="390" class="attachement-full" /></div>

好的，基本上，我想要的是圖像為785的div應該添加一個名為large的類，圖像為390的div應該獲得一個名為small的類。

所以它應該看起來像這樣。

<div class="nyhet large"> <img src="#" width="785" class="attachement-full" /></div>
<div class="nyhet small"> <img src="#" width="390" class="attachement-full" /></div>
<div class="nyhet large"> <img src="#" width="785" class="attachement-full" /></div>

等等。 到目前為止，這是我嘗試過的。

$(document).ready(function(){
  var x = $(".nyhet").length;
  for (var i=0; i<x;i++){
    n = $(".attachement-full:eq(i)").attr("width");
    if (n<785) {
      $(".nyhet:eq(i)").addClass("small");
    } else {
      $(".nyhet:eq(i)").addClass("large");
    }
  }
});

我選擇使用.attr而不是.width，因為腳本運行時圖像可能不會完成加載。

任何幫助都將被申請！

Answer 1

根據您的代碼片段，我無法確定您是否要將寬度786設置為較大的圖像，因此這里提供了一種針對范圍的方法：

$(".nyhet img").each(function() {
    var $par = $(this).parent(".nyhet");
    if(this.offsetWidth >= 785) {
        $par.addClass("large");
    } else {
        $par.addClass("small");
    }
})

Answer 2

您可以只使用一個選擇器：

$("img[width=785]").parent(".nyhet").addClass("large");
$("img[width=390]").parent(".nyhet").addClass("small");