CODEWITHSUNDEEP
jquery
herrsaidy
herrsaidy

Reputation: 91

Get height of different Elements and add different Classes

i have multiple H4's. I want the Height of each Element, that is working. After that, the smaller Height become the class "small" and the bigger one becomes the class "big". But this ist not working, both elements get both classes. Does somebody has any idea?

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

		var smallHeight = 18;
		var bigHeight = 36;

		if(getHeightHfour == smallHeight) {
			$(".box-services-c h4").addClass('small')
		}
    if(getHeightHfour == bigHeight) {
			$(".box-services-c h4").addClass('big')
		}
		
	});
<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/

Upvotes: 0

Views: 31

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Use $(this) to refer to matched element inside each function:

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

Upvotes: 2

Related Questions