ループがうまくいきません。

Question

$(function() {
		   
$(window).on('load resize', function(){
						  var val = $(window).width();
						  
						  if (val<=100){
							 
							  $(".hoge").each(function(){							  var h = $(this).height();
$(this).css({height:h+10});									});
							 }
});
});

やりたいことは$(this)の高さをマージンを10入れたいだけですが
ループするたびに$(this)のheightが増えてしまいます。
正しいコードを教えてください。

Answer 1

ループするたびに$(this)のheightが増えてしまいます。

以前に増やした分があるからです。だからその分をリセットすればいいと思います。

//略
$(this).removeAttr("style");
var h = $(this).height();
$(this).css({height:h+10});
//略

ただ、この場合はCSSでメディアクエリを使った方がいいように思えます。

@media (max-width:100px){
 .hoge{
    padding-top:10px;
  }
}

Comments

[rainbowsix]

ありがとうございます！