JQuery .next() function getting all the next elements not one

I have built a JQuery CSS3 image gallery. The problem is that the next function in the code below is not working problem.

function gallery() {

        var islide = 开发者_运维知识库$('.cornerimg:visible');
        $(islide).removeClass('cornerimgfocus');
        $(islide).next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}
$(window).load(function() {
    $( '.cornerimg' ).first().addClass('cornerimgfocus');
    setTimeout(function() {
            gallery()
        },4000);
});

The next function is operating on all the next elements not just the next one. The result being that all elements that follow the first one with class .cornerimg are becoming visible at once.

HTML

<div class="imageitem">    
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"></div>
</div>

Any ideas?

Marvellous

.next() selects the next element after each element in the set.

If the set has n elements, .next() will also have n elements.

You probably want .first().next() or .eq(1).

Why don't you select with .cornerimgfocus. This is the slide that should be / is visible, as far as I can see from your code. :visible selector seems to select all divs.

function gallery() {

        var islide = $('.cornerimgfocus');
        islide.removeClass('cornerimgfocus');
        islide.next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}

The answer is in the documentation: "Get the immediately following sibling of each element in the set of matched elements." jquery next()

Your initial selector is returning every cornerimg div, so next is returning the next element for each of those.

Try doing this to get the first element, the continue the rest of your code as before (but remove the $() around islide as SLaks said):

var islide = $('.cornerimg:visible').eq(0); // or .first()

From the API documentation: Get the immediately following sibling of each element in the set of matched elements. So it gets the immediately following element only (as opposed to nextAll). The problem is that $(islide) contains a lot of neighbouring elements, so $(islide).next() will contain all elements immediately following one of them (i.e. all the elements of $(islide) except the first one plus the element following the last element of $(islide)). Depending on what you want, you might try something like $(islide).last() or $(islide).next(':not(.cornerimg)').

You need to use an image index as I said in the answer to your other question

JQuery each function pause between non functional

I think this is what you want

 function gallery(elem) {

    $(elem).removeClass('cornerimgfocus');
    $(elem).next().addClass('cornerimgfocus');
    setTimeout(function() {
        if($(elem).next().length!=0)
        gallery($(elem).next().first());
    },4000);
}
$(window).load(function() {
$( '.cornerimg' ).first().addClass('cornerimgfocus');
setTimeout(function() {
        gallery($('.cornerimg:visible').first())
    },4000);
});