在同一类的多个元素上运行一个jQuery函数

我在两个或多个元素上运行一个jquery函数时遇到问题。它在HTML代码的第一个元素上正常运行，但在其他元素上无法正常工作。在同一类的多个元素上运行一个jQuery函数

我有这样的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>

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

事实告诉我，我不使用JavaScript或jQuery，所以请记住这一点。

下面是小提琴显示我的问题：http://fiddle.jshell.net/bWHPg/

来源

2013-08-01 Richard Šimek

只是直接针对该类。因此，例如

$(".gallery_background").function()

或者，如果函数不能被称为这样的，你要处理其他事情的每个元素，你可以做

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

我可以拿到指标和项目一轮错误的方式，但你的想法:)

来源

2013-08-01 07:33:55 PaReeOhNos

包装你的代码中的document.ready而不是window.load

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

来源

2013-08-01 07:34:15 defau1t

只是删除。首先（）在你的代码你的代码将正常工作

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

来源

2013-08-01 07:47:32 maverickosama92

这几乎是工作的方式我想：它可以运行在多个元素同一班。但是，您可以选择它的功能：它不会完全淡入淡出：当第一张图像显示并且即将淡出时，它会显示第二张图像，然后淡出第一张图像，确实看起来不好。我希望你明白我的意思。 –

好的，我得到它的工作：在这里拨弄： http://fiddle.jshell.net/bWHPg/3/ 由于maverickosama92建议，删除.first（）并添加.hide（）是我需要的一切。感谢您的建议家伙！ –

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);

来源

2013-08-01 09:23:02 rps

在这里，它不会在图片之间淡入淡出。 –

在同一类的多个元素上运行一个jQuery函数

回答

相关问题