HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .parents('div')</title>

  <style>

    p, div, span { margin: 2px; padding: 1px; }

    div { border: 2px white solid; }

    span { cursor: pointer; font-size: 12px; }

    .selected { color: blue; }

    b { color: red; display: block; font-size: 14px; }

  </style>

</head>

<body>

  <div>

    <div>

      <p><span>Hello</span></p>

      <p><span>Hello Again</span></p>

    </div>

    <div>

      <p><span>And Hello Again</span></p>

    </div>

  </div>

  <b>Unique div parents: 0</b>

  <p>Click Hellos to toggle their parents.</p>

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

  <script>

    function showParents() {

      $("div").css("border-color", "white");

      var len = $("span.selected")

        .parents("div")

        .css("border", "2px red solid")

        .length;

      $("b").text("Unique div parents: " + len);

    }

    $("span").on("click", function() {

      $(this).toggleClass("selected");

      showParents();

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .parents('div') — click spans (Try It)