stlying div's based on nth elemet

Question

0.00/5 (No votes)

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) {
        $('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 23-Feb-15 0:40am

TomPumford

Updated 23-Feb-15 2:34am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Kornfeld Eliyahu Peter · Answer 1 · 2015-02-23T00:52:00

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[^]

Posted 23-Feb-15 0:52am

Kornfeld Eliyahu Peter

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

TomPumford · Answer 2 · 2015-02-23T02:25:00

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?

Posted 23-Feb-15 2:25am

TomPumford