다른 요소의 높이 가져 오기 및 다른 클래스 추가

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') 
}