Jquery:按宽度查找图像并添加类
Jquery:按宽度查找图像并添加类
提问于 2011-12-20 17:25:35
我有许多具有相同类的的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，如果图像的宽度小于200 to，那么只向这个img添加一个小于200 to宽度的类。
例如：
var imgWidth = $(".card_div img").width();
if (imgWidth < 200) {
$(".card_div img").css({margin:"8px 8px 8px 17px", "background-color":"blue"});
}，但是这段代码为每个图像添加了页边距和背景，，我不能更改divs的名称。每个人都有相同的名字。
我只想在img中添加小于< 200的css优惠。
有可能吗？谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-12-20 17:36:30
您发布的标记不是最好的，但是使用这个精确的标记，我已经设置了这个示例，说明如何实现您想要的结果：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');
}
});我将强烈建议，将其更改为更有效。
- 您的所有ID都应该是唯一的
- 在您的ID中不包括'#‘
- 在适当的时候使用类名
更新：您更新了您的标记以进行改进。我更新了答案以反映你的变化。
Stack Overflow用户
发布于 2011-12-20 17:27:37
尝试以下几点：
$("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');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8579410
复制相关文章
相似问题
腾讯云开发者
