JSFiddle - React, Tailwind, and code Playground

by Michael Vashevko

HTML

<h1><span>I love</span> jQuery</h1>
<div class="my-div-class">
  <p>It's the <strong>BEST THING</strong> ever</p>
  <button id="myButton">Button test</button>
</div>
<ul class="my-ul-class">
  <li>Item one
    <ul>
      <li id="sub2" >Sub one</li>
      <li id="sub2" class="subitem otherclass">Sub two</li>
    </ul>
  </li>
</ul>
<svg width="200" height="100" class="my-svg-class">
  <g transform="translate(40,50)" class="my-group-class"> 
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24" class="my-text-class"> It's SVG! </text> 
  </g> 
</svg>

JavaScript

let getSingleSelector = el => {
  let selector = $(el).prop('tagName');
  let id = $(el).attr('id');
  if (id) {
    selector += '#' + id;
  }
  let classNames = $(el).attr('class');
  if (classNames) {
    selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
  }
  return selector;
};
let getFullSelector = el => {
  return $(el)
    .parents()
    .map((ind, e) => getSingleSelector(e))
    .get()
    .reverse()
    .concat([getSingleSelector(el)])
    .join(' > ');
};

  $("*").on("click", function() {
    var selector = getFullSelector(this);
    alert(selector);
    return false;
  });