Click here to Skip to main content
15,920,503 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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) {
        $('ul img:nth-child(3n+3)').addClass('landscape');
        $('ul img:nth-child(3n+4)').addClass('landscape-2');
   }
   else if (result == 2460) {
        $('ul img:nth-child(3n+3)').addClass('portrait');
        $('ul img:nth-child(3n+4)').addClass('portrait-2');
   }
   else if (result == 1776) {
        $('ul img:nth-child(3n+3)').addClass('landscape-portrait');
        $('ul img:nth-child(3n+4)').addClass('landscape-portrait-2');
   }
});



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

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[^]
 
Share this answer
 
Comments
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    
link - http://master.blavou.co/dev3.html
@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?
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900