Why is this increment on every click not working in jQuery?

Question

I try to make an increment on every click, however I am stuck with this original code:

$('.de img').click(function() {
            scroll = $('body').scrollTop();
            imgJump = $(this).prevAll().length;
        var $this = $(this),
            bigImgs = $('.biggie:hidden').find('img:hidden');
            console.log(bigImgs[imgJump]);
        $('.de').fadeOut(400, function () {
                $('body').scrollTop(0);
                $('.biggie').fadeIn(400);
            });

        $(bigImgs[imgJump]).fadeIn(400);
        $('.biggietext').fadeIn(400);
        $('.number').text(imgJump + 1);
}); 

$('.biggie img').click(function(){
    var imgIs = imgJump + 1,
        imgIss = imgIs++;

    if ($(this).nextAll().length > 0) {
        $(this).fadeOut(400, function() {
            $(this).next().fadeIn(400);
        });
        $('.number').text(imgIss);                  
        }
});

Here is a jsFiddle with an easier version: http://jsfiddle.net/nU63B/3/.

Why is this not working?

Thanks!!

Can you show your HTML also? Because as mentioned by user1671639, as per the fiddle markup your if statement will not get executed and hence increment doesn't happen. — Harry
– Harry, Commented Nov 5, 2013 at 8:37
@Harry I changed the fiddle, did not boil it down enough first!! I think the problem is in the +1 addition and then the following increment. — loveNoHate
– loveNoHate, Commented Nov 5, 2013 at 8:43
The increment works in your updated fiddle (albeit twice, because you have a +1 and a ++). — Harry
– Harry, Commented Nov 5, 2013 at 8:45
@Harry The update only goes once, on the second click it is stuck on 3!! — loveNoHate
– loveNoHate, Commented Nov 5, 2013 at 8:46
It doesn't get updated because you are setting the original value to 1 during every click event. You can try this way. — Harry
– Harry, Commented Nov 5, 2013 at 8:49

Praveen · Accepted Answer · 2013-11-05 08:32:55Z

1

It wouldn't get increment because your if satement is not getting executed

if ($(this).nextAll().length > 0) { // $(this).nextAll().length 
                                    //returns 0 and hence not working

You have only one element (p tag) and there is is no sibilings associated with it and therefore its length returns 0.

nextAll() Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

change it to

if ($(this).nextAll().length == 0) {

Working fiddle

answered Nov 5, 2013 at 8:32

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

loveNoHate Over a year ago

I changed the fiddle, this part was an absolute fail (in the fiddle). ;) Please check it out again, I think the mistake in jQuery is happening at incrementing a value, which was added +1?! Or?

Praveen Over a year ago

@dollarvar var imgIs = 1 //returns 1 imgIss = imgIs + 1; // returns 2 imgIss++; //returns 3 hence the final value gets 3

loveNoHate Over a year ago

Wow, this is meticulous!

Praveen Over a year ago

@dollarvar in your fiddle, imgIs is always reinitialized to 1 and hence always 3 and check this fiddle jsfiddle.net/nU63B/5

loveNoHate Over a year ago

I see, that`s why I was stuck...I need to update a global variable, which never changes. ;)

Collectives™ on Stack Overflow

Why is this increment on every click not working in jQuery?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related