HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .parentsUntil section scope</title>

  <style>

    .dashboard { border: 2px solid #ccc; padding: 16px; max-width: 400px; }

    .widget { border: 1px dashed #999; padding: 8px; margin: 8px 0; }

    .path-highlight { background: #e8f4ff; outline: 2px solid #2196f3; }

    button { padding: 6px 12px; cursor: pointer; }

  </style>

</head>

<body>

  <div class="dashboard">

    <div class="widget">

      <p>Widget A</p>

      <button type="button" class="widget-btn">Action</button>

    </div>

    <div class="widget">

      <p>Widget B</p>

      <button type="button" class="widget-btn">Action</button>

    </div>

  </div>

  <p>Click a button to highlight ancestors inside .dashboard only.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $(".dashboard").on("click", ".widget-btn", function() {

      $(".dashboard *").removeClass("path-highlight");

      $(this).parentsUntil(".dashboard").addClass("path-highlight");

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .parentsUntil('.dashboard') — click path (Try It)