如何用jQuery在隐藏父容器中获取可见子元素且不显示父容器？

首先得明确你遇到的核心问题：jQuery的:visible伪类判断的是元素是否在页面上实际占据空间。当父容器#container被设置为display:none时，所有子元素都会被浏览器隐藏，不会渲染到页面上——所以不管子元素自身的样式如何，都会被:visible判定为不可见，这就是你之前的代码拿不到结果的原因。

不过不用慌，我们可以绕过这个限制，直接检查子元素自身的隐藏状态，忽略父容器的影响。以下是针对你给出的示例的几种解决方案：

方法1：过滤掉内联设置display:none的子元素 #

你的示例中，隐藏的子元素是通过内联style="display:none"设置的，我们可以直接检查元素的内联样式：

const targetElements = $("#container div").filter(function() {
  // 只保留自身内联display不是none的元素
  return this.style.display !== 'none';
});

// 测试输出：会选中第1和第3个div
targetElements.each(function() {
  console.log($(this).text());
});

方法2：处理通过类隐藏的情况 #

如果你的项目中是通过CSS类（比如.hidden { display: none; }）来隐藏元素，可以用not()方法排除带该类的元素：

// 假设隐藏的子元素是加了.hidden类
const targetElements = $("#container div").not('.hidden');

方法3：兼容内联样式和类的通用方案 #

如果既有内联隐藏又有类隐藏，可以结合两种判断逻辑：

const targetElements = $("#container div").filter(function() {
  return !$(this).hasClass('hidden') && this.style.display !== 'none';
});

关键说明 #

需要注意的是：如果元素的隐藏是通过外部样式表的非类规则（比如直接给div设置display:none），这种方法可能无法准确判断——因为此时元素的内联样式和类都没有标记，但它的计算样式是none。这种情况下，建议统一用类或者自定义属性来标记隐藏元素，方便后续筛选。

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