jQuery：以div的下一个实例为目标

我试图在单击函数中以某个div的下一个实例为目标。
这里有一个jsfiddle:
jQuery：

因此，我试图通过单击

来实现。列表项

将指向

.hidden

的下一个实例，并更改类以在砌体网格中显示它。但是，当前单击时，会显示

.hidden

的两个实例，而不仅仅是相关的下一个实例。我不明白为什么会这样。我很快就会将内容添加到这个相关的div中，但现在我只是想让它正常工作，这是我做不到的。

为此，您可以使用函数，它返回所有下一个同级。如果为第一个隐藏元素添加选择器，则将获得相对于单击的

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

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