如何使用 jQuery 选择没有可见子元素的元素？

有时我们想要选择一个父元素下面没有可见子元素的元素，通常情况下我们会使用 :empty 选择器。然而，:empty 选择器不能区分可见和不可见的子元素。本文将介绍如何使用 jQuery 选择没有可见子元素的元素。

使用 :hidden 选择器

在 jQuery 中，我们可以使用 :hidden 选择器选择所有不可见的元素（例如使用了 display:none 或 visibility:hidden 的元素）。因此，我们可以使用以下代码来选择没有可见子元素的元素：

$('parent-selector :not(:hidden) :empty')

这里的 parent-selector 代表父元素的选择器。这段代码会选择所有没有可见子元素的空元素。

示例

考虑以下 HTML 代码：

<div id="parent">
  <div>Visible child element</div>
  <div style="display:none"></div>
  <div>Another visible child element</div>
  <div style="visibility:hidden"></div>
  <div></div>
</div>

要选择没有可见子元素的元素，我们可以使用以下代码：

$('#parent :not(:hidden) :empty')

这会选择最后一个 div 元素。因为它是唯一没有可见子元素的空元素。

结论

使用上述方法，我们可以选择没有可见子元素的任何元素。这将为我们提供更大的灵活性和控制权。