如何循環一組jQuery元素 - 每次4個？

我有點困惑。基本上，我的頁面上有16個展示品牌的span元素。我一次只想展示4個品牌，然後設置一個時間間隔來展示接下來的4個品牌，直到我達到最終目的，此時我會重置一個櫃檯並從頭開始。這是我的想法是：如何循環一組jQuery元素 - 每次4個？

顯示所有品牌span元素
把所有的品牌元素融入到一個數組
計數第4項（品牌），並給他們的類的可視
5秒後，隱藏與類可見
顯示的所有元件陣列
當到達陣列的端部在接下來的4項，復位計數器並重新開始

一些一般的意見或幫助jQuery數組將不勝感激。我正在尋找最有活力和最簡單的解決方案。

謝謝:)

來源

2011-10-05 Henryz

我認爲我有問題的主要原因是因爲我不知道如何使用jQuery數組與我可以循環的索引。 – Henryz

這裏，它雖然有點hackish ...

var elems = $('span').hide().get(); 

(function loop() { 
    var i = 0, pointer; 

    pointer = $(elems).filter(':visible:last')[0] || $(elems).last()[0]; 

    $(elems).hide(); 

    while (i < 4) { 
     pointer = $(pointer).next()[0] || $(elems).first()[0]; 
     $(pointer).show(); 
     i += 1; 
    } 

    setTimeout(loop, 5000); 
})();

現場演示：http://jsfiddle.net/hBrt6/

如果你需要的代碼的解釋，只是讓我知道...

幾點說明：

.get()返回jQuery對象內的DOM元素數組。

所以

$('div').get()

讓你在網頁上的所有DIV元素的數組。

使用屬性訪問器運算符[i]將爲您提供jQuery對象中的第i個DOM元素。

所以

$('div')[4]

返回頁面上的第五次DIV元素。

重要的是要明白，你不能在DOM元素本身（或DOM元素數組）上調用jQuery對象。

所以這

$('div')[4].hide();

拋出一個錯誤。 DOM元素沒有hide方法。

如果您想要在jQuery對象中定位某個特定元素，同時仍保留jQuery對象，請使用.eq()。

這

$('div').eq(4).hide();

的作品就好了。

現在你明白了這種差異，讓我解釋爲什麼我在我的代碼中使用get()和[i]：問題是，我不喜歡將jQuery對象存儲在變量中。相反，我更喜歡直接使用DOM元素和DOM元素數組。

當我需要調用一些元素或數組元素的jQuery方法時，我只是首先將它包裝在$()函數中。

所以這

$(elems).hide();

的作品就好了。

當jQuery方法完成這項工作時，我只需附加.get()或[0]來「解開」jQuery對象=以獲取我的元素。

來源

2011-10-05 22:30:43

這真的很好，謝謝。我在某種程度上理解它......但是，你能告訴我它是如何工作的嗎？ - 爲什麼在初始.hide（）之後有一個.get（）？我也對[0]和filter（）部分感到困惑。 – Henryz

在jQuery中，如果我將所有span元素存儲在名爲'elems'的變量中，爲什麼它不讓我定位特定元素並隱藏它，例如elems [1] .hide（）？ – Henryz

@Henryz我用一些解釋更新了我的答案...... –

如果作爲一個JavaScript對象存在的數據，那麼你可以使用JQuery templates呈現HTML。

你會做以下

獲取JavaScript對象的陣列中的所有數據（可能已經有此）
清空你插入過目標元素容器（$('#target').empty()）
片陣列（data.slice(index, index+4)）
將模板渲染到以切片陣列爲模型的目標元素容器中（$('#template').tmpl(slicedArray).appendTo('#target')）

您應該可以使用步長爲4的for循環執行第3步。並且在模板中使用{{each}}方法遍歷行創建。

來源

2011-10-05 21:21:09 Jason

好吧，我的解決方案將如我所想的那樣動態和簡單。我擅長製作類似的東西，並且擅長jQuery和JavaScript，所以我認爲我會盡力而爲。我只會寫出我能想到的最好的代碼，並顯示你需要在哪裏編輯你的其他代碼。

$("#ContainerElement.span:gt(4)").hide(); 
var i = 0; 
var b = setInterval("BrandChange();",5000); 
function BrandChange() 
{ 
$("#ContainerElement.span:eq(i), 
#ContainerElement.span:eq(i+1), 
#ContainerElement.span:eq(i+2), 
#ContainerElement.span:eq(i+3)").hide(normal,function(){ 
i+=4; 
if(i == 16) i = 0; 
$("#ContainerElement.span:eq(i), 
#ContainerElement.span:eq(i+1), 
#ContainerElement.span:eq(i+2), 
#ContainerElement.span:eq(i+3)").show(normal); 
}); 
}

我不得不尋找一些jQuery選擇摸不着頭腦，但是，這並不否定它的有效性，基本上它首先隱藏在保持它們的元素，這將需要一個ID的所有span元素「ContainerElement」啓動BrandChange功能的間隔，該功能淡出並隱藏四個當前品牌，然後淡入並顯示接下來的四個品牌，同時增加i變量以保持計數，然後等待間隔再次發生五秒鐘。這不一定是你計劃做的方式，但我認爲你會發現它確實如你所願。如果你有問題，就問吧。 :)

來源

2011-10-06 21:55:44 Ethan722

如何循環一組jQuery元素 - 每次4個？

回答

相關問題