margin-bottomを用いボックスの高さを揃えたい


「class名"netKakaku"を子要素に持たない場合、spanクラス名priceにnoNetKakakuというクラスを付加する」

(クラス名noNetKakakuをcssで一行分マージンを指定)

という、わけあってちょっと複雑な方法で実現しました。

本当に自分参照用のメモなので、詳しく知りたい方はtwitterで@dentaqまでお願いします。

html


<div class="priceBox">
<img src="syouhinImg-01.jpg" />
<span class="price">通常店頭価格:49,800円</span>
<span class="netKakaku">ネット販売特価:34,800円</span>
</span>
</div>
<div class="priceBox">
<img src="syouhinImg-02.jpg" />
<span class="price">通常店頭価格:39,800円</span>
</div>

css


div.priceBox {
border:#ccc 1px solid;
}
span.noNetKakaku {
margin:0 0 24px;
}
*:first-child+html span.noNetKakaku {
margin:0 0 14px;
}

javascript


$(function(){
var boxes = $('div.priceBox');
for(var i=0; i<boxes.size(); i++){
if (!$('div.priceBox').eq(i).children().hasClass('netKakaku'))
$('span.price').eq(i).addClass('noNetKakaku');
}
});