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/

如果您要缓存对象，可以使用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);
});

jQuery onclick计算以前的实例

2 个答案: