javascript - $this - 找不到正确的 jQuery 选择器

Question

由于我的 html 结构过于复杂(wordpress 评论系统)，我很难找到使用哪些选择器来在我的页面上显示某些 div。

我没有将其全部粘贴到此处，而是创建了一个非常简化的布局版本并创建了一些 fiddle 。

1. 这是显示所有 div 的完整页面:

https://jsfiddle.net/e25zvfyg/

这就是我想要的工作方式。基本上，回复框和关联的现有评论都是隐藏的，直到单击“回复”，然后隐藏的 div 向下滑动。我已将我的“非工作”JS 包含在这个 fiddle 中。希望有人能告诉我哪里出错了？

https://jsfiddle.net/yf3oagx7/

 (function ($) {
$('.single-f3ed-reply').hide();
$('.f3ed-reply').hide();
$('a.this-reply').click(function () {
    $('.single-f3ed-reply').hide();
    $(this).parents().next('.single-f3ed-reply').slideDown('fast');
    $(this).parents().next('.f3ed-reply').slideDown('fast');
    return false;
});

})(jQuery);

任何帮助将不胜感激。

Answer 1

.parents() 返回所选元素上方的所有元素。您不希望这样，您只想向上直到包含 div/包装器。

.next() 返回下一个项目(已过滤)，这在 parents() 的上下文中没有任何意义

向上移动到最近的环绕 div(最接近)，然后再次向下(查找)找到您想要的项目:

    $(this).closest(".stream-wrap").find('.single-f3ed-reply').slideDown('fast');
    $(this).closest(".stream-wrap").find('.f3ed-reply').slideDown('fast');

https://jsfiddle.net/yf3oagx7/1/