如何用jQuery选择指定名称且祖父元素含指定类的DOM元素

针对你的需求，我们可以直接通过DOM结构和类名精准定位元素，完全不需要依赖:hidden伪类（毕竟页面区域可能整体隐藏，但这不是你筛选的依据）。

正确的选择器方案 #

这里提供两种可靠的写法，适配不同场景：

写法1：直接用CSS层级选择器一步到位

如果你的HTML结构固定（祖父元素是.interface_controlgroup，中间隔一层div），可以直接用层级选择器匹配：

let hidden_inputs = $('.interface_controlgroup.d-none > div > input[name="layout[]"]');

它的逻辑是：找到带有d-none类的.interface_controlgroup元素，选中它直接子div下的、name为layout[]的input。

写法2：用.filter()结合.closest()更鲁棒

如果后续DOM结构可能有变化（比如中间多嵌套一层元素），用.closest()向上查找最近的祖父容器会更稳定：

// 先选中所有name为layout[]的input，再筛选符合条件的
let all_inputs = $('input[name="layout[]"]');
let hidden_inputs = all_inputs.filter(function() {
  // 向上查找最近的.interface_controlgroup，判断是否带d-none类
  return $(this).closest('.interface_controlgroup').hasClass('d-none');
});

这种写法不依赖固定的层级数，哪怕中间DOM结构调整，只要祖父容器的类名不变，就能精准匹配。

为什么你之前的尝试有问题？ #

• 你写的$('input[name=ide_layout_std\[\]]'.parent().parent()".d-none")存在语法错误：jQuery选择器是字符串，不能直接在后面链式调用.parent()，必须先选中元素集合再调用方法。
• 依赖:hidden伪类不可靠：:hidden会把所有不可见的元素都算进去（包括继承祖先隐藏状态的元素），但你需要的是仅根据祖父元素的类来筛选，和元素实际可见性无关。

完整示例代码 #

如果需要同时获取所有目标input以及其中属于隐藏组的input，可以这样写：

// 获取所有name为layout[]的input
let all_inputs = $('input[name="layout[]"]');

// 获取其中祖父元素带d-none的input
let hidden_inputs = $('.interface_controlgroup.d-none input[name="layout[]"]');

这样不管页面是否处于隐藏状态，都能精准匹配到目标元素，完全依赖DOM结构和类名，不受元素实际可见性影响。

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