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

我有点困惑。基本上，我的页面上有16个展示品牌的span元素。我一次只想展示4个品牌，然后设置一个时间间隔来展示接下来的4个品牌，直到我达到最终目的，此时我会重置一个柜台并从头开始。这是我的想法是：如何循环一组jQuery元素 - 每次4个？

显示所有品牌span元素
把所有的品牌元素融入到一个数组
计数第4项（品牌），并给他们的类的可视
5秒后，隐藏与类可见
显示的所有元件阵列
当到达阵列的端部在接下来的4项，复位计数器并重新开始

一些一般的意见或帮助jQuery数组将不胜感激。我正在寻找最有活力和最简单的解决方案。

谢谢:)

来源

2011-10-05 Henryz

我认为我有问题的主要原因是因为我不知道如何使用jQuery数组与我可以循环的索引。 – Henryz

这里，它虽然有点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对象=以获取我的元素。

来源

2011-10-05 22:30:43

这真的很好，谢谢。我在某种程度上理解它......但是，你能告诉我它是如何工作的吗？ - 为什么在初始.hide（）之后有一个.get（）？我也对[0]和filter（）部分感到困惑。 – Henryz

在jQuery中，如果我将所有span元素存储在名为'elems'的变量中，为什么它不让我定位特定元素并隐藏它，例如elems [1] .hide（）？ – Henryz

@Henryz我用一些解释更新了我的答案...... –

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

你会做以下

获取JavaScript对象的阵列中的所有数据（可能已经有此）
清空你插入过目标元素容器（$('#target').empty()）
片阵列（data.slice(index, index+4)）
将模板渲染到以切片阵列为模型的目标元素容器中（$('#template').tmpl(slicedArray).appendTo('#target')）

您应该可以使用步长为4的for循环执行第3步。并且在模板中使用{{each}}方法遍历行创建。

来源

2011-10-05 21:21:09 Jason

好吧，我的解决方案将如我所想的那样动态和简单。我擅长制作类似的东西，并且擅长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选择摸不着头脑，但是，这并不否定它的有效性，基本上它首先隐藏在保持它们的元素，这将需要一个ID的所有span元素“ContainerElement”启动BrandChange功能的间隔，该功能淡出并隐藏四个当前品牌，然后淡入并显示接下来的四个品牌，同时增加i变量以保持计数，然后等待间隔再次发生五秒钟。这不一定是你计划做的方式，但我认为你会发现它确实如你所愿。如果你有问题，就问吧。 :)

来源

2011-10-06 21:55:44 Ethan722

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

回答

相关问题