gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 15:49:23 25 4
gpt4 key购买 nike

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

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

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

谢谢:)

最佳答案

这里,虽然有点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) 返回。

关于javascript - 如何循环访问一组 jQuery 元素 - 一次 4 个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7667776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com