Добавить класс в изображение в зависимости от ширины изображения

Question

У меня есть список изображений, ширина которых равна 226 пикселей или 300 пикселей. Я хочу изменить css, когда изображение имеет меньшую ширину, 226 пикселей. Это правильное значение на «плюс», который должен быть изменен

HTML, выглядит следующим образом:

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

И это цикл так будет несколько изображений, отображаемых.

Мои JS + Jquery до сих пор выглядят так:

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

Но CSS не меняется. Любая идея, что я делаю неправильно?

Answer 1

Изменить код

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

Изменения

• использования this.width поскольку изображения имеют width своей собственности ..
• использование .prev() вместо .next() поскольку DIV является предыдущий элемент в DOM
• называть все внутри window.load событие, чтобы быть уверенным, что изображения загружаются (и поэтому они имеют ширину)

Answer 2

Вы должны использовать siblings селектор

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