Question

I have many divs with the same class and inside of divs contain a image:

<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> 
.
.
.

I want find a img that if the image’s width its less than 200px add a class only to this img less than 200px width.

For example:

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

But this code add the margin and background to every image divs I can not change the divs name. Every divs have same name.

I want only add the css propierty to img that its less than < 200.

Its possible? Thank you

Answer 1

The HTML Markup that you posted is not the best, but using that exact markup I’ve setup this example of how you would achieve your desired result: 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');
    }
});

I would highly recommend that you change the HTML to be more valid.

1. All of your IDs should be unique
2. Don’t include the ‘#’ in your ID
3. Use Class Names when Appropriate

UPDATED: You updated your markup to be improved. I’ve updated the answer to reflect your changes.