每个div的jquery循环

Question

我想在一个页面上制作多个（超过12个）幻灯片，这将在鼠标悬停时生成动画。现在只有第一个div是动画的。这里是我的代码：

jQuery: 

$(document).ready(function() { 
    $('#reference').each(function() { 
    $(this).cycle({ 
     speed:  200, 
     //timeout:  0, 
     fx:  'fade', 
    }); 
    }); 
}); 

HTML: 

<div class="columns-3"> 
    <div class="column firstCol"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column lastCol"> 
     <div class="columns-3-Content"> 
      <div id="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="clear:both;"></div> 

在此先感谢！

Answer 1

你应该传递一个类而不是唯一的div ID。 jQuery的：

$(document).ready(function() { 
    $('.reference').each(function() { 
    $(this).cycle({ 
     speed:  200, 
     //timeout:  0, 
     fx:  'fade', 
    }); 
    }); 
}); 

编辑（通过并感谢杰拉德施耐德:)）：

你也可以这样做：

$('.reference').cycle({ speed: 200, fx: 'fade' }); 

HTML：

<div class="columns-3"> 
    <div class="column firstCol"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
       <img src="images/img2.png" /> 
      </div> 
     </div> 
    </div> 
    <div class="column lastCol"> 
     <div class="columns-3-Content"> 
      <div class="reference"> 
       <img src="images/img1.png" /> 
        <img src="images/img2.png" /> 
      </div> 
      </div> 
     </div> 
    </div> 
    <div style="clear:both;"></div>