javascript - 在具有相同类的多个元素上运行一个 jQuery 函数

Question

我在两个或多个元素上运行一个 jquery 函数时遇到问题。它在 HTML 代码中的第一个元素上正常运行，但在其他元素上不能正常运行。

我有这个 jQuery：

$(window).load(function(){
$('.background_square_1 li.bg_square').hide();

function rotate() {
$(".background_square_1 li.bg_square").first().appendTo('.background_square_1').fadeOut(500);
$(".background_square_1 li.bg_square").first().fadeIn(500);

setTimeout(rotate, 10000);
}
rotate();
});

像这样的HTML：

<ul class="background_square_1 gallery_background">
<li class="bg_square bg_1"></li>
<li class="bg_square bg_2"></li>
<li class="bg_square bg_3"></li>
<li class="bg_square bg_4"></li>
</ul>

<ul class="background_square_1 gallery_background">
<li class="bg_square bg_1"></li>
<li class="bg_square bg_2"></li>
<li class="bg_square bg_3"></li>
<li class="bg_square bg_4"></li>
</ul>

基本上，我想要实现的是在具有 background_square_1 类的两个（但可以更多！）ul 元素上运行该函数。

说实话，我不使用 javascript 或 jQuery，所以请记住这一点。

这是 Fiddle 显示我的问题： http: //fiddle.jshell.net/bWHPg/

Answer 1

直接针对那个类。所以例如

$(".gallery_background").function()

或者，如果不能像那样调用函数并且您想用其他可以做的事情来处理每个元素

$(".gallery_background").each(function(index, item){
    var elm = $(this);
    ... Do stuff ...
})

我本可以以错误的方式获得索引和项目，但你明白了:)

Answer 2

只需在您的代码中删除 .first() 您的代码就可以正常工作

在这里工作小提琴：http: //fiddle.jshell.net/bWHPg/2/

Answer 3

http://fiddle.jshell.net/bWHPg/5/

setInterval(function() { 
  $('.background_square_1').find('li:first')
        .fadeOut(500)
        .next()
        .fadeIn(500)
         .next()
        .fadeIn(500)
        .end()
        .appendTo(".background_square_1");
},  500);

Answer 4

将您的代码包装在 document.ready 而不是 window.load

$(function() {
   //jQuery code here
});