jquery <чем и> чем .width

Question

Я не уверен, что это лучший способ описать это.Но я нахожу ширину изображения и, если она меньше 200 пикселей, он применяет класс ниже 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}

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

Таким образом, для изображения 600px jquery применяет ширину 600px к родительскому div, или изображение 434px применяет ширину 434px к родительскому 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' в int?так что

if (width < 200)

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

Answer 3

width () имеет форму установки , поэтому вы можете написать:

$(".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.
    }
});