javascript - 如何检测类(class)中的 child 人数？

Question

我正在尝试创建一个无限循环的内容 slider 。我目前让它循环 3 个元素，但我想实现一个功能，让它始终循环而无需更新脚本。

我想知道的是，如果我可以创建一个 if 语句来表示“如果 x 大于 .quote 中的元素数，则执行此操作。”或者我必须将 .quote 分配给变量吗？

这是 JSFiddle

var x = 1;

$('.quote:nth-child(2)').hide();
$('.quote:nth-child(3)').hide();

$('#next').click(function(e){
    e.preventDefault();

    if(x === 3){
        $('.quote:nth-child(' + x + ')').hide();
        x = 1;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x++;
        $('.quote:nth-child(' + x + ')').show();
    }
});

$('#prev').click(function(e){
    e.preventDefault();

    if(x === 1){
        $('.quote:nth-child(' + x + ')').hide();
        x = 3;
        $('.quote:nth-child(' + x + ')').show();
    }
    else{
        $('.quote:nth-child(' + x + ')').hide();
        x--;
        $('.quote:nth-child(' + x + ')').show();
    }
});

Answer 1

"If x is greater than the number of elements in .quote, do this." Or would I have to assign .quote to a variable?

没有变量

if (x > $('.quote').length) { do stuff... }

但您也可以将其分配给变量。这样效率更高，因为您不会不必要地一遍又一遍地执行长度计算 - 只要长度不变即可。

var quote = $('.quote').length;
if (x > quote) { do stuff... }