Question

I have an infinite scrolling gallery that uses markup like this (transformed through CSS to appear horizontal):

<div>
    <ul>
        <li><img id="placeHolder" class="photo" .../></li>
    </ul>
</div>

Now, I have some jQuery that populates the UL element with bullets (li) which themselves contain images.

Past a certain defined number of images the first image should be removed.
This is what the following code is supposed to do.

// Limit to max
if( $('.photo:visible').size() >= maxPhotos ){
        $(".photo:first").parent().remove(); // Remove li also removes img
}

However, it appears that it also removes the UL after a certain time.

Any suggestions on how I could avoid this?

Answer 1

var $photos = $('.photo:visible');
if( $photos.length >= maxPhotos ){
    $photos.first().parent('li').remove();
}

• .parent() can take a selector
• Don’t select the .photo elements twice
• Use .length instead of .size()