jquery - 使用 jQuery 的 .each() 函数将函数附加到多个幻灯片容器

Question

我在一个单页网站上有很多小的 jQuery Cycle 幻灯片 div（容器），比如

    <div class="foo bar" data-value="1000"> // data-value varies on each container
        <img src="directory/img_0.jpg" alt="img 0" />
        <img src="directory/img_1.jpg" alt="img 1" />
        <img src="directory/img_2.jpg" alt="img 2" />
    </div>

并希望将它们全部循环 -每个幻灯片 div 具有不同的数据值- 无需硬编码/重复

$(document).ready(function() {
  $('.foo.bar').cycle({
      speed: 300,
      timeout: 6000,
      delay: $('.foo.bar').data('value')
  });
});

对于此类幻灯片 div 的所有出现。如何将此类 jQuery 函数“附加”或“绑定”或“链接”到每个幻灯片 div，以便使用每个元素的不同数据值？我怀疑 jQuery 的 .each() 函数可以让我这样做——但是怎么做呢？

编辑小提琴

非常感谢您！

Answer 1

正如你提到的，.each()会让你很容易做到这一点：

$('.foo.bar').each(function() {
    $(this).cycle({
      speed: 300,
      timeout: 6000,
      delay: $(this).data('value')
    });
});

在.each回调内部，this指的是您当前正在操作的元素。