Question

I’m building a photo gallery and need to apply some CSS to the first photo within view of my #wrapper div. Here’s the relevant code:

$('.inside:first-of-type>div:nth-of-type(1)').css('display', 'none');
$('.inside:first-of-type>div:nth-of-type(2)').css('display', 'block');

All elements within view of the #wrapper div are assigned the class .inside (this class is removed once they slide outside #wrapper). Each photo has two div layers. In this instance, I want to hide the 1st and remove the 2nd layer. I thought the above code would work, and it does, but only if the first photo of the series is in view, otherwise it does nothing.

Is my CSS wrong here?

Answer 1

First, there is no such selector: first-of-type in jQuery, and so in most of the browers.

This is what you need:

var items = $('#wrapper .inside > div');
items.eq(0).css('display', 'none');
items.eq(1).css('display', 'block');

Notes:

• You better cache the selector result, and avoid the second DOM query.
• You can use the hide function on the first div: items.eq(0).hide();
• I want to hide the 1st and remove the 2nd layer.
.css('display', 'block'); doesn’t remove anything! You probably want to use the remove function: items.eq(1).remove();