jquery - jQuery：定位 div 的下一个实例

Question

我试图在点击函数中定位某个 div 的下一个实例。
这是一个 jsfiddle：http: //jsfiddle.net/wUEkE/1/
jQuery：

$(document).ready(function(){

 $(".listings-item").click(function() {
 $('.hidden').next($('.hidden').removeClass('hidden').addClass('preview-listing').hide().delay(400).fadeIn("slow"));
 $('#listings-wrap').masonry('reload');
 });

});

所以我想要实现的是通过单击一个.listing-item将针对下一个实例.hidden并更改类以将其显示在砌体网格中。但目前，在点击时，两个实例.hidden都被显示，而不仅仅是相关的下一个实例。我不明白为什么会这样。我很快就会将内容附加到这个相关的 div 中，但现在我只是想让它工作，但我做不到。

Answer 1

为此，您可以使用该nextAll函数，该函数返回所有下一个兄弟姐妹。如果您为第一个隐藏元素添加一个选择器，那么您将获得与div单击的元素相关的下一个隐藏元素。

像这样：

$(this).nextAll('.hidden:first')

在您的示例中充分使用如下所示：

$(".listings-item").click(function() {
    $(this).nextAll('.hidden:first').removeClass('hidden').addClass('preview-listing').hide().delay(400).fadeIn("slow");
    $('#listings-wrap').masonry('reload');
});

这是您更新的示例