動的に横で配置されているボックスの高さを揃える際に、作成したコードをjQueryプラグイン化してみました。
下記がコードになります。
(function(jQuery) {
jQuery.fn.height_trim = function(options) {
var target = options['target'];
var max_height = 0;
jQuery(target).each(function() {
jQuery(this).height("auto");
var box_height = jQuery(this).height();
if (max_height < box_height) {
max_height = box_height;
}
});
jQuery(target).height(max_height);
}
})(jQuery);
処理内容としては最大の高さを保持する変数し、指定されたクラスが指定されているボックスの高さをループで比べていきループの処理終了後に、指定されているクラスの高さを変更します。
動的に変更するため、ループの最初に「jQuery(this).height("auto")」を指定することで全てのボックスの高さを初期化(自動)に合わせています。
使い方
<script type="text/javascript">
jQuery(function() {
jQuery(document).height_trim({"target" : "クラス名セレクタ"});
});
</script>