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

Question

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

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

这是显示所有 div 的完整页面：

这就是我希望它的工作方式。基本上回复框和相关的现有评论是隐藏的，直到 "REPLY" 被点击，然后隐藏的 divs slideDown。我在这个 fiddle 中包含了我的 "non-working" JS。希望有人能告诉我哪里出错了？

 (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() returns 所有所选元素上方的元素。你不想要这个，你只想上升到包含 div/wrapper.

.next() returns 下一项（已过滤），在 parents()

的上下文中没有任何意义

向上到最近的包装 div (closest)，然后再次向下 (find) 到您想要的项目：

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

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

Answer 2

快速破解： https://jsfiddle.net/e25zvfyg/2/

使用：

$(this).closest('article').find('.single-f3ed-reply').slideDown('fast');
$(this).closest('article').find('.f3ed-reply').slideDown('fast');

Answer 3

你可以试试这个--

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

})(jQuery);

您也可以使用 jquery closest() 函数来实现。

(function ($) {
$('.single-f3ed-reply').hide();
$('.f3ed-reply').hide();
$('a.this-reply').click(function () {
    $('.single-f3ed-reply').hide();
    $(this).closest('.stream-wrap').find('.single-f3ed-reply').slideDown('fast');
    $(this).closest('.stream-wrap').find('.f3ed-reply').slideDown('fast');
    return false;
});

})(jQuery);

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

$this - can't find the correct jQuery selector

javascript

jquery

jquery-selectors