jquery - 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

那是因为您选择了所有.polaroidImage元素，也prevAll只选择了所选元素的先前兄弟元素。您应该选择父元素，然后选择目标元素。

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

http://jsfiddle.net/kJLy6/

如果要缓存对象，可以使用indexandslice方法：

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);
});