jquery < than and > than .width

Question

Я не уверен, что лучший способ описать это. Но я нахожу ширину изображения, и если он меньше 200px, он применяет класс ниже 200 для родительского div.

$('.content').find('img').each(function() { 
    var $this = $(this), width = $this.width(); 
     if (width < 200) { 
     $(this).parents('.container').addClass('under-200'); 
     } 
}); 

CSS: .container.under-200 {width: 200px}

Это прекрасно работает, но у меня возникают трудности с применением ширины с большими изображениями.

Для изображения размером 600 пикселей jquery применяет ширину 600 пикселей к родительскому div, или изображение 434px применяет ширину 434 пикселей к родительскому div.

Answer 1

Попробуйте это:

$(this).parents('.container').css("width", width); 

Кроме того, используйте .closest() вместо .parents().

.parents() будет проходить через DOM до корневого элемента, HTML и затем фильтровать результат на основе вашего селектора. .closest(), с другой стороны, остановится, как только будет найдена совпадение.

Вы можете кипеть весь код до одной строки:

$(this).closest('.container').css("width", (width < 200 ? 200 : width)); 

Надеется, что это помогло!

Answer 2

width() имеет setter form, так что вы можете написать:

$(".content img").each(function() { 
    var $this = $(this), 
     $containers = $this.parents(".container"), 
     width = $this.width(); 
    if (width < 200) { 
     $containers.addClass("under-200"); // Set class. 
    } else { 
     $containers.width(width);   // Set width. 
    } 
}); 

Answer 3

Может быть, вы должны разбора «ширина» на межд? так что

if (width < 200) 

работы и только возвращает истину, если ширина действительно меньше, чем 200. Я могу себе представить, что она теперь всегда возвращает истину, так как ширина строка?