15,920,503 members
See more:
I am trying to apply styles after calculating the height of every 3n+3 and 3n+4

JavaScript
```\$(function() {
var fl = \$('ul img:nth-child(3n+3)').height();
var fr = \$('ul img:nth-child(3n+4)').height();
var result = fl += fr;
if (result == 1092) {
}
else if (result == 2460) {
}
else if (result == 1776) {
}
});```

HTML
```<ul>
<img height="546" src="images/landscape2.jpg">
<img height="1230" src="images/portrait.jpg">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait-2">
<img height="546" src="images/landscape2.jpg">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait-2">
<img height="1230" src="images/portrait.jpg">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait-2">
<img height="546" src="images/landscape2.jpg">
</ul>```

Problem. This calculates the height of img.first1 + img.first2 then applys the style to every 3n+3/3n+4.

I want to calculate img.first1 height + img.first2 height and apply style based on result.

I then want to calculate img.first3 height + img.first4 height and apply different style based on result.

Please note there will be no class img.first it is just to demostrate every 3n+3 and 3n+4

Help appreciated
Posted
Updated 23-Feb-15 2:34am
v2

## Solution 1

Your selectors are skipping first and second element...
The formula for the index is `an+b - 1`, where n goes from 1 to the last index...
So in your case fir the first element there is no mach as for n = 1 the result is 2 (the 3rd element)...

http://api.jquery.com/nth-child-selector/[^]
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo[^]

TomPumford 23-Feb-15 7:33am
But would this solve the problem? The style is being added to the right iterations but the class that it is adding is based on the height calculation of img.first1 and img.first2 rather than the iteration that it is applying the style to.

Eg img.first3 and img.first4 is having a style applied 'landscape-portrait,landscape-portrait2' however it should be having the class 'portrait,portrait-2' applied based on height.

Sorry this example demonstrates better:

<pre lang="HTML"><ul>
<img height="546" src="images/landscape2.jpg">
<img height="1230" src="images/portrait.jpg">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait-2">
<img height="546" src="images/landscape2.jpg">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait">
<img height="1230" src="images/portrait.jpg" class="landscape-portrait-2">
<img height="1230" src="images/portrait.jpg">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait">
<img height="546" src="images/landscape2.jpg" class="landscape-portrait-2">
<img height="546" src="images/landscape2.jpg">
</ul></pre>
TomPumford 23-Feb-15 8:35am

## Solution 2

@KornfeldEliyahuPeter the problem is not that the class is not being applied to the right nth child, just that the class that is being supplied is wrong. Any ideas?