Question

我有很多具有相同类的div，div里面包含一个图像：

<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
<div class="card_div"> 
<img src="path" alt="name_image"> 
</div> 
.
.
.

我希望找到一个img，如果图像的宽度小于200px，则只为这个img小于200px的宽度添加一个类。

例如：

var imgWidth = $(".card_div img").width();
if (imgWidth < 200) {
$(".card_div img").css({margin:"8px 8px 8px 17px", "background-color":"blue"});  
}

但是这段代码为每个图片div添加了边距和背景我无法更改div名称。每个div都有相同的名称。

我只想添加css propierty来img，它的值小于＆lt; 200。

它可能吗？谢谢

Answer 1

您发布的的HTML标记不是最好的，但是使用该确切标记我已经设置了如何实现所需结果的示例：http://jsfiddle.net/xFSLN/1/

<强> HTML：

<div class="card_div"><img src="http://placekitten.com/199/199" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/200/200" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/300/300" alt="name_image"></div> 
<div class="card_div"><img src="http://placekitten.com/100/100" alt="name_image"></div>

<强> CSS：

.under-200 {
    margin: 8px 8px 8px 17px;
    background-color: blue;
}

<强>使用Javascript：

$('div.card_div]').find('img').each(function () {
     var $this = $(this), width = $this.width();
    if (width < 200) {
        $this.addClass('under-200');
    }
});

我强烈建议您将HTML更改为更有效。

您的所有ID都应该是唯一的
请勿在您的ID
适当时使用班级名称

更新：您更新了标记以进行改进。我已更新答案以反映您的更改。

Answer 2

尝试以下方法：

$("div.card_div > img").filter(function() {
  return $(this).width() < 200;
).css({margin:"8px 8px 8px 17px", "background-color":"blue"});

或者，最好是，如果你有一个具有必要样式的css类：

$("div.card_div > img").filter(function() {
  return $(this).width() < 200;
).addClass('cssClassHere');

Jquery：按宽度查找图像并添加类

2 个答案: