異なる要素の高さを取得し、異なるクラスを追加する

Question

私は複数のH4を持っています。私は働いている各要素の高さが欲しいです。その後、小さい方の高さは「小さい」クラスになり、大きい方のクラスは「大きい」クラスになります。しかし、これは動作していません、両方の要素は両方のクラスを取得します。誰かが何か考えているのですか？

\t $(".box-services-c h4").each(function() { 
 
\t \t var getHeightHfour = $(this).height(); 
 
\t \t console.log(getHeightHfour); 
 

 
\t \t var smallHeight = 18; 
 
\t \t var bigHeight = 36; 
 

 
\t \t if(getHeightHfour == smallHeight) { 
 
\t \t \t $(".box-services-c h4").addClass('small') 
 
\t \t } 
 
    if(getHeightHfour == bigHeight) { 
 
\t \t \t $(".box-services-c h4").addClass('big') 
 
\t \t } 
 
\t \t 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="box-services-c"> 
 
<h4>SPANNAX®<br>Spannfutter</h4> 
 
</div> 
 
<div class="box-services-c"> 
 
<h4>Spannfutter</h4> 
 
</div>

https://jsfiddle.net/tqg6zt5h/1/

Answer 1

使用$（この）各関数内でマッチした要素を参照するには、次の

if(getHeightHfour == smallHeight) { 
    $(this).addClass('small') 
} 
if(getHeightHfour == bigHeight) { 
    $(this).addClass('big') 
}