Dima Knivets
Dima Knivets

Reputation: 2528

jQuery each element children

I've got a page where user can publish several sliders (carousels) on it. I'm using jQuery to iterate over each of them and assign events and base logic. When there is one slider on a page, everything works good, but when I add a second one, the first slider breaks - it doesn't change captions and current number for the first one, but does it for the second instead. I'm struggling with this problem for several hours already. Here's the code:

(function($){
    $(function(){
        $('.slider').each(function(){
            var slider = $(this),
                photos = slider.find('.photos img')
                captions = slider.find('.captions p'),
                counter = slider.find('.status .current'),
                count = 0,
                total = photos.length;
            slider.find('.status .total').text(total);
            photos.eq(0).addClass('active').siblings().hide();
            captions.eq(0).siblings().hide();
            slider.find('a.previous, a.next').click(function(e){
                e.preventDefault();
                if(count < (total - 1))
                    count++;
                else 
                    count = 0;
                photos.filter('.active').removeClass('active').fadeOut('fast');
                photos.eq(count).addClass('active').fadeIn('fast');
                captions.eq(count).show().siblings().hide();
                counter.text(count + 1);
            });
        });
    });
}(jQuery));

Here's the fiddle.

Upvotes: 0

Views: 101

Answers (2)

Mattos
Mattos

Reputation: 447

Your are missing a comma:

photos = slider.find('.photos img'), //OVER HERE

http://jsfiddle.net/luckmattos/K3Y9w/3/

Upvotes: 0

David Mann
David Mann

Reputation: 481

you have forgotten a comma on line 6:

[...]photos = slider.find('.photos img'),
            captions = slider.find('.captions p'),
            counter = slider.find('.status .current'),[...]

Here's the fiddle

Upvotes: 2

Related Questions