HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter hidden demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 32rem; }
    #panel, #outside { padding: 12px; margin: 8px 0; border: 1px solid #e2e8f0; border-radius: 6px; }
    .hide { display: none; }
    #report { margin-top: 12px; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <div id="panel">
    <p>Visible paragraph</p>
    <p class="hide">Hidden inside panel</p>
    <span class="hide">Hidden span</span>
  </div>
  <div id="outside">
    <p class="hide">Hidden outside panel</p>
  </div>
  <div id="report"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var count = $("#panel *").filter(":hidden").length;
    $("#report").text("Hidden inside #panel: " + count);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

.filter(":hidden") — scoped count (Try It)