jQuery的CSS BUG修復

Question

我有以下HTML結構：

<ul> 
    <li><a href><img src/></a></li> 
    <li><a href><img src/></a></li> 
    <li><a href><img src/></a></li> 
</ul> 

由於固定一些CSS錯誤，我需要知道這些圖片鏈接是在jQuery腳本「mouseovered」 後來我需要選擇器是這樣的東西

$('a img').mouseover(function(){ 
var imgElement = $(this); 
if ('a img[3]') { // if the hovered link is the third 
imgElement.animate({ 
       width: "315px", 
       height: "225px", 
       marginLeft: "-150px" 
      }, 1500); 

問題是如何獲得第二個或第三個'img'在這種情況下。

Answer 1

試試這個http://jsfiddle.net/pxfunc/M2KAF/

var $imgs = $('a img'); 
$imgs.mouseover(function() { 
    var $that = $(this); 
    if ($imgs.index($that) === 2) { // if the hovered link is the third 
     $that.animate({ 
      width: "315px", 
      height: "225px", 
      marginLeft: "-150px" 
     }, 1500); 
    } 
}); 

Answer 2

試試這個

$('a img').each(function(i){ 
$(this).mouseover(function(){ 
    if (i == 2) { // if the hovered link is the third 
     $(this).animate({ 
       width: "315px", 
       height: "225px", 
       marginLeft: "-150px" 
      }, 1500); 
    } 
    }); 
}); 

Answer 3

我會使用jQuery的第n個孩子選擇http://api.jquery.com/nth-child-selector/

Answer 4

我不知道我是正確的跟着你。如果你想要第三個<li>的<img>，你可以使用$('ul li:eq(2) a img')。