jQuery：定位 div 的下一个实例

Posted 2023-02-25

【中文标题】jQuery：定位 div 的下一个实例

【英文标题】：jQuery: Target next instance of div

【发布时间】：2013-03-15 11:25:43

【问题描述】：

我正在尝试在点击函数中定位某个 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 中，但现在我只是想让它工作，但我做不到。

【参考方案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');
);

Here is you example updated