同じクラス名をもつ複数のコンテンツの中である条件を満たしたものにだけstyleを追加するにはどうすれば良いでしょうか

【やりたい事】
画像とテキストが入ったボックスがそれぞれあり、画像ボックス（.img）の高さよりもテキストボックス（.txtBox）が大きかった際、画像とテキストの入った親のボックス（.cons）にpaddingトップで差分の高さを付与したい。
※画像ボックスの方が大きかった際は付与させない

【不明点】
同じクラス名をもってる際、条件をみたしたものに個別に指定していく記述方法がわからない。。

【試したソース】

html

<div class="contsBox">
 <div class="conts">
  <div class="img"><img src="http://placehold.jp/640x240.png" width="640" height="240"></div>
	<div class="txtBox">
	 <p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
  </div>
 </div>
 <div class="conts">
  <div class="img"><img src="http://placehold.jp/640x540.png" width="640" height="540"></div>
   <div class="txtBox">
	 <p>ダミー</p>
	</div>
  </div>
</div>

css

.contsBox {
 width: 960px;
 margin: auto;
 padding: 50px 0;
}
.contsBox .conts {
 position: relative;
 margin-bottom: 50px;
}
.contsBox .conts .img {
 width: 640px;
}
.contsBox .conts .txtBox {
 width: 420px;
 background: #FBBDBE;
 padding: 150px 10px;
 position: absolute;
 bottom: -10px;
 right: 0;
}

script

$(function () {
	//高さを取得
	var imgHeight = $(".conts .img").outerHeight();
	var txtHeight = $(".conts .txtBox").outerHeight();
	//txtBox の高さがimgより高かったらcontsに差分のpadding-topを付与
	if (imgHeight < txtHeight) {
		var ptHeight = (txtHeight - imgHeight) -10 +"px";
		$(".conts").css("padding-top", ptHeight);
	}
});

勉強のため、出来ればjsでの解決方法を希望です。
どう説明すれば良いのかわからず、説明文がわかりづらいかと思いますが、
どなたかご教示のほど、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

例えばこんな感じで。

JavaScript
1$( function () {
2	$( '.conts' ).each( function () {
3		//高さを取得
4		var imgHeight = $( '.img', this ).outerHeight();
5		var txtHeight = $( '.txtBox', this ).outerHeight();
6		//txtBox の高さがimgより高かったらcontsに差分のpadding-topを付与
7		if ( imgHeight < txtHeight ) {
8			var ptHeight = ( txtHeight - imgHeight) -10 + 'px';
9			$( this ).css( 'padding-top', ptHeight );
10		}
11	} );
12} );