Question

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

显示所有品牌元素
将所有品牌元素放入数组
计算前4个项目（品牌）并为其提供可见的
5秒后，使用可见类
显示数组中的下4个项目
到达阵列末尾时，重置计数器并重新开始

对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对象=以获取我的元素。

Answer 2

如果数据作为JavaScript对象存在，那么您可以使用JQuery templates来呈现HTML。

您可以执行以下操作

获取JavaScript对象数组中的所有数据（可能已有此对象）
清空您要插入的目标元素容器（$('#target').empty()）
将数组切片为只包含您想要的4个元素（data.slice(index, index+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选择器来解决这个问题，但这并不反驳它的有效性，基本上它首先隐藏了Element中保存它们的所有span元素，这将需要id为“ContainerElement”的启动BrandChange功能的间隔，淡出并隐藏四个当前品牌，然后淡入并显示接下来的四个品牌，同时递增i变量以保持计数，然后等待间隔在五秒内再次发生。它不一定是您计划的方式，但我认为您会发现它完全符合您的要求。如果你有问题，就问吧。：）

如何循环浏览一组jQuery元素 - 一次4个？

3 个答案: