How can I get selector from jQuery object

Question

click function          this      how can I get selector from   this          Is there an easy way to get selector from   this   There is a way to select an element by its selector  but what about getting the selector from element

User · Answer

Taking in account some answers read here I'd like to propose this:

function getSelectorFromElement($el) {
  if (!$el || !$el.length) {
    return ;
  }

  function _getChildSelector(index) {
    if (typeof index === 'undefined') {
      return '';
    }

    index = index + 1;
    return ':nth-child(' + index + ')';
  }

  function _getIdAndClassNames($el) {
    var selector = '';

    // attach id if exists
    var elId = $el.attr('id');
    if(elId){
      selector += '#' + elId;
    }

    // attach class names if exists
    var classNames = $el.attr('class');
    if(classNames){
      selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
    }

    return selector;
  }

  // get all parents siblings index and element's tag name,
  // except html and body elements
  var selector = $el.parents(':not(html,body)')
    .map(function() {
      var parentIndex = $(this).index();

      return this.tagName + _getChildSelector(parentIndex);
    })
    .get()
    .reverse()
    .join(' ');

  if (selector) {
    // get node name from the element itself
    selector += ' ' + $el[0].nodeName +
      // get child selector from element ifself
      _getChildSelector($el.index());
  }

  selector += _getIdAndClassNames($el);

  return selector;
}

Maybe useful to create a jQuery plugin?

User · Answer

This won t show you the DOM path  but it will output a string representation of what you see in eg chrome debugger  when viewing an object       mybtn   click  function event       console log   s   this         output   button mybtn        https   developer chrome com devtools docs console-api consolelogobject-object

User · Answer

WARNING     selector has been deprecated as of version 1 7  removed as of 1 9   The jQuery object has a selector property I saw when digging in its code yesterday  Don t know if it s defined in the docs are how reliable it is  for future proofing   But it works          selector    returns     Edit  If you were to find the selector inside the event  that information should ideally be part of the event itself and not the element because an element could have multiple click events assigned through various selectors  A solution would be to use a wrapper to around bind    click   etc  to add events instead of adding it directly   jQuery fn addEvent   function type  handler        this bind type    selector   this selector   handler        The selector is being passed as an object s property named selector  Access it as event data selector   Let s try it on some markup  http   jsfiddle net DFh7z      lt p class  info  gt some text and  lt a gt a link lt  a gt  lt  p gt       p a   addEvent  click   function event        alert event data selector      p a         Disclaimer  Remember that just as with live   events  the selector property may be invalid if DOM traversal methods are used    lt div gt  lt a gt a link lt  a gt  lt  div gt    The code below will NOT work  as live relies on the selector property which in this case is a parent   - an invalid selector      a   parent   live function     alert  something          Our addEvent method will fire  but you too will see the wrong selector - a parent

User · Answer

Well  I wrote this simple jQuery plugin   This checkes id or class name  and try to give as much exact selector as possible   jQuery fn getSelector   function          if    this  attr  id              return         this  attr  id               if    this  prop  tagName   toLowerCase       body      return  body        var myOwn     this  attr  class        if   myOwn            myOwn     gt       this  prop  tagName          else           myOwn         myOwn split      join                  return   this  parent   getSelector           myOwn

User · Answer

I ve released a jQuery plugin  jQuery Selectorator  you can get selector like this          on  click   function      alert   this  getSelector   join   n       return false

User · Answer

In collaboration with  drzaus we ve come up with the following jQuery plugin   jQuery getSelector    function     undefined            adapted http   jsfiddle net drzaus Hgjfh 5       var get selector   function  element            var pieces                for    element  amp  amp  element tagName     undefined  element   element parentNode                if  element className                    var classes   element className split                       for  var i in classes                        if  classes hasOwnProperty i   amp  amp  classes i                             pieces unshift classes i                            pieces unshift                                                                         if  element id  amp  amp     s  test element id                     pieces unshift element id                   pieces unshift                                 pieces unshift element tagName               pieces unshift    gt                         return pieces slice 1  join                    fn getSelector   function  only one            if  true     only one                return get selector this 0              else               return   map this  function  el                    return get selector el                                        window jQuery     Minified Javascript     http   stackoverflow com questions 2420970 how-can-i-get-selector-from-jquery-object 15623322 15623322  function e t  var n function e  var n    for  e amp  amp e tagName   t e e parentNode  if e className  var r e className split      for var i in r  if r hasOwnProperty i  amp  amp r i   n unshift r i   n unshift        if e id amp  amp    s  test e id   n unshift e id  n unshift      n unshift e tagName  n unshift    gt     return n slice 1  join      e fn getSelector function t  if true   t  return n this 0   else return e map this function e  return n e       window jQuery    Usage and Gotchas   lt html gt       lt head gt     lt  head gt       lt body gt           lt div id  sidebar  gt               lt ul gt                   lt li gt                       lt a href     id  home  gt Home lt  a gt                   lt  li gt               lt  ul gt           lt  div gt           lt div id  main  gt               lt h1 id  title  gt Welcome lt  h1 gt           lt  div gt            lt script type  text javascript  gt                  Simple use case                 main   getSelector                   gt   HTML  gt  BODY  gt  DIV main                  If there are multiple matches then an array will be returned                body  gt  div   getSelector              gt    HTML  gt  BODY  gt  DIV main    HTML  gt  BODY  gt  DIV sidebar                   Passing true to the method will cause it to return the selector for the first match                body  gt  div   getSelector true         gt   HTML  gt  BODY  gt  DIV main            lt  script gt       lt  body gt   lt  html gt    Fiddle w  QUnit tests  http   jsfiddle net CALY5 5

User · Answer

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    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt   lt script gt        function                    on  click   function e              e preventDefault              var selector     this               parents                map function     return this tagName                  get                reverse                concat  this nodeName                join   gt                var id     this  attr  id              if  id                 selector         id                         var classNames     this  attr  class              if  classNames                selector            trim classNames  replace   s gi                               alert selector                          lt  script gt   lt  head gt   lt body gt   lt h1 gt  lt span gt I love lt  span gt  jQuery lt  h1 gt   lt div gt     lt p gt It s the  lt strong gt BEST THING lt  strong gt  ever lt  p gt     lt button id  myButton  gt Button test lt  button gt   lt  div gt   lt ul gt     lt li gt Item one      lt ul gt         lt li id  sub2   gt Sub one lt  li gt         lt li id  sub2  class  subitem otherclass  gt Sub two lt  li gt       lt  ul gt     lt  li gt   lt  ul gt   lt  body gt   lt  html gt    For example  if you were to click the 2nd list nested list item in the HTML below  you would get the following result   HTML gt BODY gt UL gt LI gt UL gt LI sub2 subitem otherclass

User · Answer

I was getting multiple elements even after above solutions  so i extended dds1024 work  for even more pin-pointing dom element   e g  DIV nth-child 1  DIV nth-child 3  DIV nth-child 1  ARTICLE nth-child 1  DIV nth-child 1  DIV nth-child 8  DIV nth-child 2  DIV nth-child 1  DIV nth-child 2  DIV nth-child 1  H4 nth-child 2   Code   function getSelector el        var  el   jQuery el        var selector    el parents   not html body                     map function                                          var i   jQuery this  index                                         i str                                             if  typeof i     undefined                                                                                  i   i   1                                          i str      nth-child     i                                                                                   return this tagName   i str                                                       get   reverse   join            if  selector            selector          el 0  nodeName             var index    el index        if  typeof index     undefined              index   index   1          selector      nth-child     index                   return selector

User · Answer

Just add a layer over the   function this way    x000D   x000D       function jQ     x000D   return  function      x000D    var fnc   jQ apply this arguments   x000D    fnc selector    arguments length gt 0  arguments 0  null  x000D    return fnc   x000D       x000D         x000D   x000D   x000D    Now you can do things like    a   selector and will return  a  even on newer jQuery versions

User · Answer

Thank you p1nox   My problem was to put focus back on an ajax call that was modifying part of the form     ajax    url    ajax invite load php           async   true           type    POST            data            dataType    html         success   function html  statut                        var focus     document activeElement  getSelector                         td left html html                         focus  focus                            I just needed to encapsulate your function in a jQuery plugin         function     undefined           fn getSelector   function            if   this     this length            return                  function  getChildSelector index            if  typeof index      undefined               return                        index   index   1          return   nth-child     index                       function  getIdAndClassNames  el            var selector                   attach id if exists         var elId    el attr  id            if elId             selector          elId                        attach class names if exists         var classNames    el attr  class            if classNames             selector          classNames replace    s   s   g      replace   s gi                           return selector                    get all parents siblings index and element s tag name           except html and body elements       var selector   this parents   not html body             map function               var parentIndex     this  index               return this tagName    getChildSelector parentIndex                       get            reverse            join              if  selector               get node name from the element itself         selector          this 0  nodeName                get child selector from element ifself            getChildSelector this index                    selector     getIdAndClassNames this          return selector            window jQuery

User · Answer

http   www selectorgadget com  is a bookmarklet designed explicitly for this use case   That said  I agree with most other people in that you should just learn CSS selectors yourself  trying to generate them with code is not sustainable

User · Answer

I added some fixes to  jessegavin s fix   This will return right away if there is an ID on the element  I also added a name attribute check and a nth-child selector in case a element has no id  class  or name   The name might need scoping in case there a multiple forms on the page and have similar inputs  but I didn t handle that yet   function getSelector el       var  el     el        var id    el attr  id        if  id       should  only be one of these if theres an ID         return      id             var selector    el parents                    map function     return this tagName                      get   reverse   join            if  selector            selector          el 0  nodeName             var classNames    el attr  class        if  classNames            selector            trim classNames  replace   s gi                   var name    el attr  name        if  name            selector      name      name                   if   name           var index    el index            if  index                index   index   1              selector      nth-child     index                            return selector

User · Answer

The best answer would be  var selector     something      selector  anything function      console log selector

User · Answer

This can get you selector path of clicked HTML element-          on  click   function          let selectorPath     this  parents   map function     return this tagName    get   reverse   join  - gt          alert selectorPath        return false

User · Answer

How about   var selector         selector  click function         alert selector         I don t believe jQuery store the selector text that was used  After all  how would that work if you did something like this      div   find  a   click function            what would expect the  selector  to be here

User · Answer

Try this          click function event       console log   event handleObj selector

User · Answer

Javascript code for the same  in case any one needs  as i needed it  This just the translation only of the above selected answer        lt script type  text javascript  gt   function getAllParents element       var a   element      var els           while  a  amp  amp  a nodeName      document             els unshift a nodeName           a   a parentNode            return els join          function getJquerySelector element        var selector   getAllParents element          if selector           selector          element nodeName               var id   element getAttribute  id        if id           selector          id            var classNames   element getAttribute  class        if classNames           selector          classNames replace    s   s   g      replace   s gi                  console log selector       alert selector       return selector     lt  script gt

User · Answer

Did you try this              click function          this  attr  id

User · Answer

Are you trying to get the name of the current tag that was clicked   If so  do this           click function        alert   this  0  nodeName         You can t really get the  selector   the  selector  in your case is

[javascript] How can I get selector from jQuery object

Examples related to javascript

Examples related to jquery

Examples related to jquery-selectors

Examples related to tree-traversal