如何循环一次遍历一组jQuery元素-4？

Question

我有点困惑。基本上，我有16个跨度元素在我的页面上显示品牌。我想一次只显示4个品牌，然后设置一个间隔来显示接下来的4个品牌，直到我到达终点，届时我会重新设置一个计数器，然后从头开始。以下是我的想法：

1. 显示所有品牌跨度元素
2. 将所有品牌元素放入一个数组中。
3. 数前4项(品牌)，并给予他们的类别可见。
4. 5秒后，用可见类隐藏所有元素。
5. 在数组中显示下面的4个项
6. 当到达数组的末尾时，重置计数器并重新启动。

请提供一些关于jquery数组的一般性建议或帮助。我正在寻找最有活力和最简单的解决方案。

谢谢:)

Answer 1

在这里，有点讨厌.

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对象的第一个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对象=，以获得我的元素。

Answer 2

如果数据以JavaScript对象的形式存在，则可以使用JQuery模板来呈现HTML。

您将执行以下操作

1. 获取JavaScript对象数组中的所有数据(可能已经有此数据)
2. 空您要插入的目标元素容器($('#target').empty())
3. 将数组切片为只具有所需的4个元素(data.slice(index, index+4))
4. 将模板呈现为以切片数组为模型的目标元素容器($('#template').tmpl(slicedArray).appendTo('#target'))

您应该能够使用第4步的for循环执行步骤3。在模板中，使用{{each}}方法循环行创建。

Answer 3

好的，我的解决方案将是尽可能的动态和简单。我擅长做那样的事情，并且非常擅长jQuery和JavaScript，所以我想我应该试试这个。我将在这里编写我能想到的最好的代码，然后显示您需要在哪里编辑您的其他代码。

$("#ContainerElement.span:gt(4)").hide();
var i = 0;
var b = setInterval("BrandChange();",5000);
function BrandChange()
{
$("#ContainerElement.span:eq(i),
#ContainerElement.span:eq(i+1),
#ContainerElement.span:eq(i+2),
#ContainerElement.span:eq(i+3)").hide(normal,function(){
i+=4;
if(i == 16) i = 0;
$("#ContainerElement.span:eq(i),
#ContainerElement.span:eq(i+1),
#ContainerElement.span:eq(i+2),
#ContainerElement.span:eq(i+3)").show(normal);
});
}

我必须查找一些jQuery选择器来找出这一点，但这并不能证明它的有效性，基本上它首先将所有span元素隐藏在保存它们的元素中，这个元素需要一个"ContainerElement“的id，为BrandChange函数启动一个间隔，这个间隔会消失并隐藏四个当前的品牌，然后淡入并显示下四个品牌，同时增加i变量以保持计数，然后等待时间间隔在5秒内再次发生。这不一定是你计划的方式，但我想你会发现它完全符合你的意愿。如果你有什么问题就问吧。:)