如何循环遍历一组jQuery元素—一次4个

How do I cycle through a group of jQuery elements - 4 at a time?

本文关键字：元素 jQuery 一次 4个 一组 何循环 循环 遍历      更新时间：2023-09-26

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

  1. 显示所有品牌跨元素
  2. 将所有品牌元素放入数组
  3. 统计前4个项目(品牌)，并给他们的类别可见
    4. 5秒后，隐藏所有class为visible的元素
  4. 显示数组中接下来的4个项目
  5. 当到达数组结束时，重置计数器并重新开始
对于jquery数组的一些一般性建议或帮助，我将不胜感激。我在寻找最具活力和最简单的解决方案。

谢谢:)

这里，虽然有点粗俗…

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]附加到"unwrap"jQuery对象=以获得我的元素。

如果数据以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}}方法来遍历行创建。

好的，我的解决方案将是动态和简单的，因为我认为是可能的。我很擅长制作这样的东西，也很擅长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元素元素拥有它们,这将需要一个id BrandChange"ContainerElement"开始一个区间的函数,淡出和隐藏了四个当前品牌,然后消失在了接下来的四个品牌,同时增加我变量计数,然后等待5秒钟的间隔再次发生。这不一定是你计划的方式，但我想你会发现它完全符合你的要求。如果你有任何问题，尽管问。:)

相关文章：