jquery <より大きい>および<より大きい> width

私はこれを説明する最善の方法がわからない。しかし、イメージの幅を見つけていて、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は親divに600px幅を適用し、434px画像は親divに434px幅を適用します。

1
追加された
ビュー: 2
源
ru fr es pt de ar
@ Cadence96直接の親だけが必要な場合はyes、それはparent（）です。上向きにしたい場合は、それはparents（）（またはclosest（））です
追加された 著者 Andreas Eriksson, 源

3 答え

これを試して：

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

また、 .parents（）の代わりに .closest（）を使用してください。

.parents() will go through the DOM all the way to the root element, HTML, and THEN filter the result based on your selector. .closest(), on the other hand, will stop as soon as a match is found.

すべてのコードをひとつの行にまとめることができます：

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

これが助けて欲しい！

1
追加された
源
シンプルで分かりやすい！どうもありがとうございました。 .closest（）は、より速く .parents（）でなければなりません。再度、感謝します。
追加された 著者 uriah, 源

width() has a setter form, so you can write:

$(".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.
    }
});
0
追加された
源
フレデリックにお手伝いいただきありがとうございます。
追加された 著者 uriah, 源

多分あなたはintに '幅'を解析する必要がありますか？そのため

if (width < 200)

widthが実際には200未満の場合にのみtrueを返します。幅が文字列であるため、常にtrueを返すとは想像できますか？

0
追加された
源
.width（）は数値を返します。 （2番目のモーション）要素の幅を数学的計算で使用する必要がある場合は、.width（）メソッドをお勧めします。 api.jquery.com/width
追加された 著者 Joseph, 源
.width（） は数値を返します。
追加された 著者 Gabriele Petrioli, 源
私はそれが単位を返さないことを知っていましたが、それは常に整数、すなわち決して弦または浮動小数点ですか？フロートは問題ではありません。
追加された 著者 Willem Mulder, 源