在同一類的多個元素上運行一個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函數

回答

相關問題