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

我在两个或多个元素上运行一个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>

基本上，我试图实现的是在两个（但可以更多）ul元素上运行函数，使用background_square_1类

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

---

这里是Fiddle，它显示了我的问题：

直接针对那个类。比如说

$(".gallery_background").function()

或者，如果不能像那样调用函数，并且您希望用其他方法处理每个元素，那么您可以这样做

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

---

我本可以用错误的方式获取索引和条目，但您得到了这样的想法：）

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

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

只需删除代码中的.first（），您的代码就可以正常工作

在这里演奏小提琴：

---

这几乎按照我想要的方式工作：它在具有相同类的多个元素上运行。但是，您可以了解它的功能：它不会完美地淡入淡出：当第一个图像显示并且即将淡出时，它会显示第二个图像一秒钟，然后淡出第一个图像，这看起来确实很糟糕。我希望你能理解我的意思。好吧，我成功了：在这里摆弄：正如maverickosama92建议的那样，删除.first（）并添加.hide（）是我所需要的一切。谢谢大家的建议！在这里，它不会在图片之间淡入淡出。

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