Add class to image depending on image width

Question

I have a list of images where the width is either 226px or 300px. I want to change the css when the image have the smaller width, 226px. It is the right value on "plus" that should be changed

The HTML looks like following:

        <div class="item-image">
            <div class="plus-wrapper">
                <div class="plus"></div>
                <img src="source_to_image" alt="">
            </div>
        </div>

And it is a loop so it will be several images displayed.

My JS + jQuery so far look like this:

        var image = $('.plus-wrapper img');
        image.each(function () {
            var that = $(this);
            if (that.width() < 250) {
                that.next('.plus').css('right', '41px');
            }
        });

But the CSS is not changed. Any idea what I am doing wrong?

Answer 1

Change your code to

$(window).load(function(){
    var image = $('.plus-wrapper img');
        image.each(function () {
            var that = $(this);
            if (this.width < 250) {
                that.prev().css('right', '41px');
            }
        });
});

The changes are

• use this.width since images have a width property of their own..
• use .prev() instead of .next() since the div is the previous element in the DOM
• call everything inside the window.load event to be sure the images are loaded ( and so they have a width )

Answer 2

You should be using the siblings selector

    var image = $('.plus-wrapper img');
    image.each(function () {
        if ($(this).width() < 250) {
            $(this).siblings('.plus').css({'right' : '41px'});
        }
    });