javascript - 如何循环访问一组 jQuery 元素 - 一次 4 个？

Question

我有点困惑。基本上，我的页面上有 16 个显示品牌的 span 元素。我想一次只显示 4 个品牌，然后设置一个时间间隔来显示接下来的 4 个品牌，直到我到达终点，此时我将重置一个计数器并重新从头开始。这是我的想法:

1. 显示所有品牌跨度元素
2. 将所有品牌元素放入一个数组中
3. 计算前 4 个项目(品牌)并将它们归类为可见
4. 5 秒后，隐藏所有 class 为 visible 的元素
5. 显示数组中接下来的 4 项
6. 当到达数组末尾时，重置计数器并重新开始

一些关于 jquery 数组的一般性建议或帮助将不胜感激。我正在寻找最动态和最简单的解决方案。

谢谢:)

Answer 1

这里，虽然有点hackish...

var elems = $( 'span' ).hide().get();

(function loop () {
    var i = 0, pointer;

    pointer = $( elems ).filter( ':visible:last' )[0] || $( elems ).last()[0];

    $( elems ).hide();

    while ( i < 4 ) {
        pointer = $( pointer ).next()[0] || $( elems ).first()[0];
        $( pointer ).show();
        i += 1;
    }

    setTimeout( loop, 5000 );
})();

现场演示: http://jsfiddle.net/hBrt6/

如果您需要代码的解释，请告诉我...

---

一些解释:

.get() 返回 jQuery 对象内的 DOM 元素数组。

所以

$( 'div' ).get()

为您提供页面上所有 DIV 元素的数组。

使用属性访问器运算符 [i] 将为您提供 jQuery 对象中的第 i 个 DOM 元素。

所以

$( 'div' )[4]

返回页面上的第五个 DIV 元素。

重要的是要了解您不能在 DOM 元素本身(或 DOM 元素数组)上调用 jQuery 对象。

所以这个

$( 'div' )[4].hide();

抛出一个错误。 DOM 元素没有hide 方法。

如果您想要定位 jQuery 对象中的特定元素，同时仍保留 jQuery 对象，请使用 .eq()。

这个

$( 'div' ).eq( 4 ).hide();

工作得很好。

现在你明白了这个区别，让我解释一下为什么我在我的代码中使用 get() 和 [i]:问题是，我不喜欢在变量中存储 jQuery 对象。相反，我更喜欢直接使用 DOM 元素和 DOM 元素数组。

当我需要在某个元素或元素数组上调用 jQuery 方法时，我只是先将它包装在 $() 函数中。

所以这个

$( elems ).hide();

工作得很好。

当 jQuery 方法完成工作时，我只需附加 .get() 或 [0] 来“展开”jQuery 对象 = 以获取我的元素(s) 返回。