jquery next()函数获取所有下一个元素,而不是一个

slmsl1lt  于 2023-05-17  发布在  jQuery
关注(0)|答案(6)|浏览(141)

我创建了一个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);
});

下一个函数对所有下一个元素进行操作,而不仅仅是下一个。其结果是,第一个元素之后的所有class .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>

有什么想法吗
太棒了

5cnsuln7

5cnsuln71#

.next()选择 * 集合中的每个元素 * 之后的下一个元素。
如果集合有 n 个元素,则.next()也将有 n 个元素。
您可能需要.first().next().eq(1)

cgh8pdjw

cgh8pdjw2#

为什么不选择.cornerimgfocus。这是应该/是可见的幻灯片,据我所知,从你的代码。:visible选择器似乎选择了所有div。

function gallery() {

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

ahy6op9u3#

答案在文档中:“获取匹配元素集合中每个元素的紧接着的兄弟元素。”jquery next()
初始选择器返回每个cornerimg div,所以next返回每个元素的下一个元素。
尝试这样做以获取第一个元素,然后继续前面的代码(但如Slaks所说,删除islide周围的$()):

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

cbeh67ev4#

关于API documentationGet the immediately following sibling of each element in the set of matched elements.因此它只获取紧接着的元素(与nextAll相反)。问题是$(islide)包含很多相邻的元素,所以$(islide).next()将包含所有紧跟在其中一个元素之后的元素(即$(islide).next())。$(islide)的所有元素,除了第一个加上$(islide)的最后一个元素之后的元素)。根据您的需要,您可以尝试使用$(islide).last()$(islide).next(':not(.cornerimg)')

czfnxgou

czfnxgou5#

你需要使用一个图像索引,就像我在回答你的另一个问题时所说的那样
jQuery每个函数之间暂停非函数

xlpyo6sf

xlpyo6sf6#

我想这就是你想要的

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

相关问题