css - Javascript styling nth child -

I'm currently applying a CSS class based on the height of 2 nth child, for example if the height of 2 children + Height adds the x special class to the third child equals.

To calculate this I have 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: NT-Child (3n + 3)'). AdClass ('Style 1A'); $ ('UL IMG: Anth-Child (3N + 4)'). AdClass ('Style 1b' );} And if (result == 2460) {$ ('UL IMG: NT-Child (3n + 3)'). AdCLASS ('Style2A'); $ ('UL Image: Anth-Child (3 N + 4) '$ (' Ul img: nth-0 '); Ad Class (' Style 2b ');) and if (result M == 1776) {$ ('UAL Image: Anth-Child (3n + 3)') Children (3N + 4) '). AddClass ('style3b');}});  

It works almost entirely, it calculates the height of the first object of 3n + 3 and 3n + 4 and applies a style to all 3n + 3.

However, instead of walking for the first time I have to change my javascript and then apply the style to calculate the height of each object of 3n + 3 and 3n + 4.

Li (3) + Lee (SAU) 4) Add style, add li (6) + Li (7) style.

Thanks in advance!

Because you need to handle each pair elements separately, so you have to loop over the archive Will be required. Something like this:

  var $ threes = $ ('Ull img: nth-child (3n + 3)'); // Get the collection of all 3n + 3 elements var $ fours = $ ('ul img: nth-child (3n + 4)'); // Collect all 3n + 4 elements (var i = 0; i & lt; $ fours.length; i ++) for {var $ three = $ threes.eq (i); // get personal element var $ four = $ fours.eq (i); // Get the personal element var result = $ three.height () + $ four.height (); If (result == 109) {$ three.addClass ('style1a'); $ Four.addClass ('style1b'); } And if (result == 246) {$ three.addClass ('style2a'); $ 4.addClass ('style2b'); } And if (result == 177) {$ three.addClass ('style3a'); $ Four.addClass ('style3b'); }}  
 
  $ (function () {var $ threes = $ ('ul img: nth-child (3n + 3)'); var $ Fourteen = $ ('ul img: anth-child (3n + 4)'); (var i = 0; i  
 
  .style1a, .style1b {border: 1px solid blue;} .style2a, .style2b {border: 1px solid red;} .style3a, .style3b {border: 1px solid green;}  
 
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.11.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x59" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x100" /> & Lt; Img src = "http://placehold.it/35x77" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; Img src = "http://placehold.it/35x146" /> & Lt; Img src = "http://placehold.it/35x100" /> & Lt; Img src = "http://placehold.it/35x50" /> & Lt; / Li & gt; & Lt; / Ul & gt;