同じクラスの画像から異なる高さと幅を取得し、兄弟に適用する

Question

私は基本的に無制限の画像を持っています。各画像の寸法は異なります（また、ビューポートのサイズが変わるとパーセンテージによって動的に変化します）。これらの寸法に合わせるために各画像の兄弟が必要です。

コンソールの各画像の幅を印刷するためにJQueryを取得しましたが、画像の兄弟divに適用する方法がわかりません。また、ウィンドウのサイズを変更しても、兄弟のdivが常に画像と同じ大きさになるように、ビューポートのサイズの変更を監視する方法があればうれしいでしょう。

HTML：

<a class="shop-item"> 

    <img class="thumbnail"/> 

    <div class="product-information"> 
    </div> 

</a> 

    <a class="shop-item"> 

    <img class="thumbnail"/> 

    <div class="product-information"> 
    </div> 

</a> 

はJQuery：

$(window).load(function() { 
    $(".thumbnail").each(function() { 
    var imgwidth = $(this).outerWidth(); 
    $(this).closest('.product-information').css('width', 'imgwidth'); 

    console.log(imgwidth) 
    }); 
}); 

CodePen：事前に http://codepen.io/jonp/pen/yOrvwJ

ありがとう！コメントで述べた問題を除き

Answer 1

、あなたは別のセレクター/メソッドが必要なので、

、むしろ最も近いよりも、）（次の（）を使用します：

$(window).load(function() { 
    $(".thumbnail").each(function() { 
    var imgwidth = $(this).outerWidth(); 
    $(this).next('.product-information').css('width', imgwidth+'px'); 

    console.log(imgwidth) 
    }); 
}); 

デモ：http://codepen.io/anon/pen/BKEYXX