HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery .end() showTags</title>
  <style>p, div { margin: 4px; font-weight: bold; } b { color: red; }</style>
</head>
<body>
  <p>Hi <span>there</span> how are you?</p>
  <p>This <span>span</span> is one of <span>several</span> spans.</p>
  <div>Tags initially: <b id="t0"></b></div>
  <div>After find: <b id="t1"></b></div>
  <div>After end: <b id="t2"></b></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    jQuery.fn.showTags = function (n) {
      var tags = this.map(function () { return this.tagName; })
        .get().join(", ");
      $("#t" + n).text(tags);
      return this;
    };
    $("p")
      .showTags(0)
      .find("span")
      .showTags(1)
      .css("background", "yellow")
      .end()
      .showTags(2)
      .css("font-style", "italic");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .end() — showTags stack (Try It)