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");

将类添加到包含特定宽度的图像的div

2 个答案: