Функция JQuery .next() получает все следующие элементы, а не один

Я создал галерею изображений JQuery CSS3. Проблема в том, что следующая функция в коде ниже не работает.

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);
});

Следующая функция работает со всеми следующими элементами, а не только с одним. В результате все элементы, следующие за первым с классом .cornerimg, сразу становятся видимыми.

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>

Любые идеи?

Чудесный


function jquery next
person RIK    schedule 24.06.2011    source источник
comment
Вам не нужно писать $(islide).   -  person SLaks    schedule 24.06.2011

Ответы (6)


arrow_upward
2
arrow_downward

Почему бы вам не выбрать с .cornerimgfocus. Это слайд, который должен быть/виден, насколько я вижу из вашего кода. Селектор :visible, кажется, выбирает все div.

function gallery() {

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

arrow_upward
5
arrow_downward

.next() выбирает следующий элемент после каждого элемента в наборе.

Если в наборе n элементов, .next() также будет содержать n элементов.

Вы, вероятно, хотите .first().next() или .eq(1).

person SLaks    schedule 24.06.2011

arrow_upward
1
arrow_downward

Ответ содержится в документации: «Получить непосредственно следующего брата каждого элемента в наборе совпадающих элементов». jquery next()

Ваш первоначальный селектор возвращает каждый div угла, поэтому next возвращает следующий элемент для каждого из них.

Попробуйте сделать это, чтобы получить первый элемент, продолжайте остальную часть кода, как и раньше (но удалите $() вокруг islide, как сказал SLaks):

var islide = $('.cornerimg:visible').eq(0); // or .first()
person Richard Dalton    schedule 24.06.2011

arrow_upward
1
arrow_downward

Из документации по API: Get the immediately following sibling of each element in the set of matched elements. Таким образом, он получает только следующий за ним элемент (в отличие от nextAll). Проблема в том, что $(islide) содержит много соседних элементов, поэтому $(islide).next() будет содержать все элементы, следующие непосредственно за одним из них (т. е. все элементы $(islide), кроме первого плюс элемент, следующий за последним элементом $(islide)). В зависимости от того, что вы хотите, вы можете попробовать что-то вроде $(islide).last() или $(islide).next(':not(.cornerimg)').

person Tgr    schedule 24.06.2011

arrow_upward
0
arrow_downward

Вам нужно использовать индекс изображения, как я сказал в ответе на ваш другой вопрос

JQuery каждая функция делает паузу между нефункциональными

person Jose Faeti    schedule 24.06.2011

arrow_upward
0
arrow_downward

Я думаю, это то, что вы хотите

 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);
});
person Community    schedule 24.06.2011