2014-05-10 25 views
2

我試圖將我網站上的一些Javascript合併到一個共同的.js文件中,該文件在整個網站上共享,而不必寫出<head>標記中的所有內容每次頁面。使用For循環初始化JQuery手風琴

我遇到的一個問題是,我有多個頁面,每個頁面上有不同數量的JQuery UI手風琴小部件。例如,一頁有兩個手風琴,另一個有7個,另一個有7個,另一個有5個。

現在,我可以讓手風琴方法初始化我可能需要的最大數量的手風琴手風琴上,並沒有使用額外的ID生成,但這似乎是一種非常糟糕和低效率的方式來編碼的東西。如果有辦法,我可以在Javascript中使用循環來查看頁面上有多少手風琴ID,並只創建我需要的手風琴數量?舉例來說,如果我有:

<div id="acc1"> 
    <!-- the accordion content here--> 
</div> 
<div id="acc2"> 
    <!-- the accordion content here--> 
</div> 
<div id="acc3"> 
    <!-- the accordion content here--> 
</div> 
<div id="acc4"> 
    <!-- the accordion content here--> 
</div> 

然後我在的document.ready事件手風琴方法應該知道自動生成4個手風琴:

$("#acc1, #acc2, #acc3, #acc4").accordion(); 

什麼是最有效的方式,如果可能的話,那我可以用循環做到這一點?

回答

3

你不需要循環。

只要給每個手風琴通用類,說class="accordion",然後:

$(".accordion").accordion(); 

DEMO

+0

這使完整和完美的感覺,我感覺像一個絕對白癡以前不這樣做。首先讓我測試一切,但這應該是個訣竅。 – Matthew

+0

適合所有人:) – martynas

+0

以下是演示:http://jsfiddle.net/AeH6R/ – martynas

2

使用當前的標記,你可以這樣做:

$("div[id^='acc']").accordion(); 

http://api.jquery.com/attribute-starts-with-selector/

+1

儘管我更喜歡martynas的答案,但如果我不能使用CSS類,這仍然是一個有趣的解決方案。我沒有意識到你可以用這種方式增加事物。編輯:呃,這不是真的遞增的東西,但它仍然會做我想要的。 – Matthew