jQuery：如何通过‘侄子选择器’访问类并获取二级父元素？

嘿，我来帮你梳理下这个问题~

先看你给出的HTML结构：.js_show_alltypes的直接父元素是.box-show-alltypes，而你要操作的.js_item在同级的.all-types容器里——这就是你用.parent().parent()没成功的核心原因：往上找两级拿到的是这两个div的共同父容器，但如果这个父容器嵌套复杂，或者你实际的页面结构和手写的有出入，就会定位失败。

给你几个更精准的解决方案：

方案1：直接定位同级的目标容器 #

因为.all-types和.box-show-alltypes是兄弟节点，你可以先拿到当前元素的父容器，再通过siblings()找到同级的.all-types，最后定位.js_item：

$('.js_show_alltypes').click(function (e) {
    e.preventDefault();
    // 找到同级的.all-types容器，再筛选里面的.js_item
    $(this).parent().siblings('.all-types').find('.js_item').slideToggle();
    // 把slideToggle替换成你需要的筛选操作即可
});

方案2：通过共同祖先容器定位 #

如果这两个div都在同一个父容器里（比如一个叫.container的外层盒子），用closest()精准锁定共同祖先，再搜索目标元素会更稳健：

$('.js_show_alltypes').click(function (e) {
    e.preventDefault();
    // 先找到共同的父容器，再搜索里面的.js_item
    $(this).closest('.container').find('.js_item').slideToggle();
});

方案3：排查.parent().parent()的问题 #

如果你坚持想用多级父元素的方式，可以先打印结果确认你拿到的是不是正确容器：

$('.js_show_alltypes').click(function (e) {
    e.preventDefault();
    // 在控制台查看当前获取的父容器
    console.log($(this).parent().parent());
    $(this).parent().parent().find('.js_item').slideToggle();
});

如果控制台输出的元素不包含.js_item，说明你实际的HTML嵌套比手写的多，得多加几个.parent()，或者换用parents()（复数形式，会遍历所有匹配的祖先节点）来定位正确容器。

额外补充：parent()仅返回直接父元素，而parents()会遍历所有上层祖先，如果你不确定层级，用parents('.目标容器类名')也能快速定位到目标祖先。

内容的提问来源于stack exchange，提问作者Alberto P