jQuery onclick統計以前的實例

Question

我試圖點擊一個類的實例，然後計數並警告同一個類的先前實例的數量，目前它似乎只顯示所有實例，而不是單擊實例之前的數量。

這裏是我目前正在與jsfiddle

HTML沿着代碼：

<div class="locationGallery"> 
    <div><span class="prev">next</span><span class="polaroidImage" ref="1">IMAGE 1 SIMULATION</span><span class="next"></span></div> 
    <div><span class="prev">next</span><span class="polaroidImage" ref="2">IMAGE 2 SIMULATION</span><span class="next"></span></div> 
    <div><span class="prev">next</span><span class="polaroidImage" ref="3">IMAGE 3 SIMULATION</span><span class="next"></span></div> 
    <div><span class="prev">next</span><span class="polaroidImage" ref="4">IMAGE 4 SIMULATION</span><span class="next"></span></div> 
</div> 

的jQuery：

var numImgs = $('div.locationGallery .polaroidImage').length; 
var prevImages = $('.polaroidImage').prevAll().length; 


$('.polaroidImage').click(function(){ 
    var title1 = $('div.locationGallery').next('.polaroidImage').attr('ref'); 
    alert(prevImages); 
}); 

CSS：

.next{ 
    margin-left:25px; 
    display:none; 
} 
.prev{ 
    margin-right:25px; 
    display:none; 
} 

Answer 1

這'S B因爲您正在選擇所有的.polaroidImage元素，所以prevAll也只選擇之前的兄弟元素的所選元素。您應該選擇父元素，然後選擇目標元素。

$('.polaroidImage').click(function(){ 
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length; 
    alert(prevImages); 
}); 

http://jsfiddle.net/kJLy6/

如果要緩存的對象，你可以使用index和slice方法：

var $prevImages = $('.polaroidImage'); 

$prevImages.click(function(){ 
    var index = $prevImages.index(this), 
     count = $prevImages.slice(0, index).length; 
}); 

http://jsfiddle.net/TKxAP/

Answer 2

使用此

$('.polaroidImage').click(function(){ 
    var title1 = $('div.locationGallery').next('.polaroidImage').attr('ref'); 
    var prevAll = $(this).parent().prevAll('div').length; 
    alert(prevAll); 
});