How can I get selector from jQuery object

by

Ok, so in a comment above the question asker Fidilip said that what he/she’s really after is to get the path to the current element.

Here’s a script that will “climb” the DOM ancestor tree and then build fairly specific selector including any id or class attributes on the item clicked.

See it working on jsFiddle: http://jsfiddle.net/Jkj2n/209/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function() {
        $("*").on("click", function(e) {
          e.preventDefault();
          var selector = $(this)
            .parents()
            .map(function() { return this.tagName; })
            .get()
            .reverse()
            .concat([this.nodeName])
            .join(">");

          var id = $(this).attr("id");
          if (id) { 
            selector += "#"+ id;
          }

          var classNames = $(this).attr("class");
          if (classNames) {
            selector += "." + $.trim(classNames).replace(/\s/gi, ".");
          }

          alert(selector);
      });
    });
    </script>
</head>
<body>
<h1><span>I love</span> jQuery</h1>
<div>
  <p>It's the <strong>BEST THING</strong> ever</p>
  <button id="myButton">Button test</button>
</div>
<ul>
  <li>Item one
    <ul>
      <li id="sub2" >Sub one</li>
      <li id="sub2" class="subitem otherclass">Sub two</li>
    </ul>
  </li>
</ul>
</body>
</html>

For example, if you were to click the 2nd list nested list item in the HTML below, you would get the following result:

HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass

More Related Contents:

  1. How can I know which radio button is selected via jQuery?
  2. Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
  3. Should all jquery events be bound to $(document)?
  4. jQuery selector regular expressions
  5. Is there a case insensitive jQuery :contains selector?
  6. Assign click handlers in for loop
  7. How can I select an element by name with jQuery?
  8. jQuery selector for inputs with square brackets in the name attribute
  9. jQuery get specific option tag text
  10. document.getElementById vs jQuery $()
  11. jQuery to loop through elements with the same class
  12. What is “context” in jQuery selector?
  13. How to get all options of a select using jQuery?
  14. JQuery .on() method with multiple event handlers to one selector
  15. Get index of clicked element in collection with jQuery
  16. Case insensitive jQuery attribute selector
  17. jQuery Selector + SVG Incompatible?
  18. jQuery select and wrap textNode
  19. Count immediate child div elements using jQuery
  20. Store jquery selector in variable
  21. How to get text node after element?
  22. jQuery: Check if div with certain class name exists
  23. Is there a ‘has focus’ in JavaScript (or jQuery)?
  24. jQuery :contains(), but to match an exact string
  25. Getting a jQuery selector for an element
  26. In jQuery, is selecting by class or id faster than selecting by some other attribute?
  27. Find HTML based on partial attribute
  28. Getting the “match” object in a Custom Filter Selector in jQuery 1.8
  29. How to select empty inputs (value=””) using jQuery
  30. jQuery: Select data attributes that aren’t empty?

Leave a Comment