Javascript styling nth child

Question

I am currently applying a css class based on the sum of 2 nth childs height for example if height of 2nd child + height of 3rd child equals x add specific class.

This is my javascript to calculate -

$(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('style1a');
    $('ul img:nth-child(3n+4)').addClass('style1b');
}
else if (result == 2460) {
    $('ul img:nth-child(3n+3)').addClass('style2a');
    $('ul img:nth-child(3n+4)').addClass('style2b');
}
else if (result == 1776) {
    $('ul img:nth-child(3n+3)').addClass('style3a');
    $('ul img:nth-child(3n+4)').addClass('style3b');
}
});

This almost works perfectly, it calculates the height of THE FIRST ITERATION OF 3n+3 and 3n+4 and applies a style to all 3n+3.

However, i need to alter my javascript to calculate the height of EVERY ITERATION of 3n+3 and 3n+4 rather than just the first iteration and then apply the style.

SUM of li(3)+li(4) add style, SUM of li(6)+li(7) add style.

Thanks in advance!

Answer 1

Because you need to handle each pair of elements separately, you will need to loop over the collection. Something like this:

http://jsfiddle.net/b187z18q/

var $threes = $('ul img:nth-child(3n+3)');  // get the collection of all 3n+3 elements
var $fours = $('ul img:nth-child(3n+4)');   // get the collection of all 3n+4 elements

for(var i = 0; i < $fours.length; i++){
    var $three = $threes.eq(i);  // get the individual element
    var $four = $fours.eq(i);    // get the individual element

    var result = $three.height() + $four.height();

    if (result == 109) {
        $three.addClass('style1a');
        $four.addClass('style1b');
    } else if (result == 246) {
        $three.addClass('style2a');
        $four.addClass('style2b');
    } else if (result == 177) {
        $three.addClass('style3a');
        $four.addClass('style3b');
    }
}

 $(function() { var $threes = $('ul img:nth-child(3n+3)'); var $fours = $('ul img:nth-child(3n+4)'); for (var i = 0; i < $fours.length; i++) { var $three = $threes.eq(i); var $four = $fours.eq(i); var result = $three.height() + $four.height(); console.log(result); if (result == 109) { $three.addClass('style1a'); $four.addClass('style1b'); } else if (result == 246) { $three.addClass('style2a'); $four.addClass('style2b'); } else if (result == 177) { $three.addClass('style3a'); $four.addClass('style3b'); } } }); 

 .style1a, .style1b { border: 1px solid blue; } .style2a, .style2b { border: 1px solid red; } .style3a, .style3b { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x59" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x100" /> <img src="http://placehold.it/35x77" /> <img src="http://placehold.it/35x50" /> <img src="http://placehold.it/35x146" /> <img src="http://placehold.it/35x100" /> <img src="http://placehold.it/35x50" /> </li> </ul> 

Answer 2

This doesn't seem like a clean approach to solving this problem. First, relying on exact heights could be really buggy, since if one pixel changes, your code get thrown off. Considering using less than/greater than vs equals or settings a class on the elements. Also, you should declare your jQuery variables once. A quick refactor:

$(function() {
var foo = $('ul img:nth-child(3n+3)');
var bar = $('ul img:nth-child(3n+4)');

switch(foo.height() + bar.height()) {
  case == 1092: 
  // You really should avoid relying on exact heights
  // Maybe try some other method to determine style
    foo.addClass('style1a');
    bar.addClass('style1b');
    break;
  case == 2460:
    foo.addClass('style2a');
    bar.addClass('style2b');
    break;
  case == 1776:
    foo.addClass('style2a');
    bar.addClass('style3b');
    break;
}

Answer 3

$ returns a collection of elements (even if there is only one matching element it is still put into a collection). Because $ always returns a collection, jQuery looks for properties/method of the first member of the collection if it thinks it is appropriate; jQuery.each() is what you want to use to avoid that behavior.

The first few lines of your function body should be:

var height;
$('ul img:nth-child(3n+3)').each(function(index, element) {
    height += element.height;
}
$('ul img:nth-child(3n+4)').each(function(index, element) {
    height += element.height;
}

The way you calculate your result, with = and += on the same line is odd, though this code takes care of that.