在jQuery中使用for循環緩存字符串

Question

我對jQuery編程頗爲陌生，所以請耐心等待。

我想緩存一個列表，我已經在我的js文件的底部，以便頁面運行更平滑。

我已經準備名單看起來就像這樣：

$(document).ready(function() { 

    hover($('#rim-1'), 900); 
    hover($('#rim-2'), 800); 
    hover($('#rim-3'), 1000); 
    hover($('#rim-4'), 900); 
    hover($('#rim-5'), 800); 
    hover($('#rim-6'), 1000); 
    hover($('#rim-7'), 900); 
    hover($('#rim-8'), 800); 
    hover($('#rim-9'), 1000); 
    hover($('#rim-10'), 900); 
    hover($('#rim-11'), 800); 
    hover($('#rim-12'), 1000); 
    shadow($('#shadow-1'), 900); 
    shadow($('#shadow-2'), 800); 
    shadow($('#shadow-3'), 1000); 
    shadow($('#shadow-4'), 900); 
    shadow($('#shadow-5'), 800); 
    shadow($('#shadow-6'), 1000); 
    shadow($('#shadow-7'), 900); 
    shadow($('#shadow-8'), 800); 
    shadow($('#shadow-9'), 1000); 
    shadow($('#shadow-10'), 900); 
    shadow($('#shadow-11'), 800); 
    shadow($('#shadow-12'), 1000); 
} 

我想成立一​​個for循環，這樣不僅「#rim」和「#shadow」獲得遞增的數字，而且他們的速度由100

我試圖建立遞增看起來像：

var hover = $("#floating-rim-container").find(".floating-rim-wrapper"); 
for (i=0; i<6; i++) { 
    var speed = speed + 100; 
} 

當然，這還遠沒有結束。我只是不確定我應該如何設置這個多方面的命令。我的理論背後是，也許我可以將它們用於所有不同語句的包裝。在html中，它們看起來像：

<div id="floating-rim-container"> 

      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-7"> 
      </a>   
      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-8"> 
      </a>   
      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-9"> 
      </a> 
      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-10"> 
      </a> 
      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-11"> 
      </a> 
      <a href="#"> 
       <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-12"> 
      </a> 
       <div id="shadow-container"> 
        <img src="images/shadow.png" class="shadow"> 
        <img src="images/shadow.png" class="shadow"> 
        <img src="images/shadow.png" class="shadow"> 
        <img src="images/shadow.png" class="shadow"> 
        <img src="images/shadow.png" class="shadow"> 
        <img src="images/shadow.png" class="shadow"> 
       </div> 
      </div> 

任何幫助將大規模讚賞！

Answer 1

試試這個，

var i=900; 
$("#floating-rim-container").find(".floating-rim-wrapper").each(function(){ 
    hover($(this),i); 
    i=i+100; 
}); 

類似的shadow