How do I get a jQuery selector's expression as text?

Question

I have a jQuery selector, which has a chained function.

Inside the function I want to get access to the TEXT representing the expression for the selector.

$("cat dog").function() {

    // how do I get access to the "cat dog" string from inside THIS function ?
};

I've over simplified in this code sample what I actually want to do. I'm writing a plug-in and I need access to the selector for which the wrapped set has been created. Obviously in this particular example I have access to "cat dog" becasue i wrote it. So just picture this being in a plugin.

Its a little tricky to google for this.

edit: the 'selector' property is unfortunately now deprecated. http://jquery.com/upgrade-guide/1.9/#selector-property-on-jquery-objects

Answer 1

There is a 'selector' attribute in the jQuery object, but I'm not sure it's always available.

Answer 2

This is far from optimal but works in some cases. You could do the following:

jQuery.fn._init = jQuery.fn.init
jQuery.fn.init = function( selector, context ) {
    return (typeof selector === 'string') ? jQuery.fn._init(selector, context).data('selector', selector) : jQuery.fn._init( selector, context );
};

jQuery.fn.getSelector = function() {
    return jQuery(this).data('selector');
};

This will return the last selector used for the element. But it will not work on non existing elements.

<div id='foo'>Select me!</div>
<script type='text/javascript'>
 $('#foo').getSelector(); //'#foo'
 $('div[id="foo"]').getSelector(); //'div[id="foo"]'
 $('#iDoNotExist').getSelector(); // undefined
</script>

This works with jQuery 1.2.6 and 1.3.1 and possibly other versions.

Also:

<div id='foo'>Select me!</div>
<script type='text/javascript'>
 $foo = $('div#foo');
 $('#foo').getSelector(); //'#foo'
 $foo.getSelector(); //'#foo' instead of 'div#foo'
</script>

Edit
If you check immidiatly after the selector has been used you could use the following in your plugin:

jQuery.getLastSelector = function() {
    return jQuery.getLastSelector.lastSelector;
};
jQuery.fn._init = jQuery.fn.init
jQuery.fn.init = function( selector, context ) {
    if(typeof selector === 'string') {
        jQuery.getLastSelector.lastSelector = selector;
    }
    return jQuery.fn._init( selector, context );
};

Then the following would work:

<div id='foo'>Select me!</div>
<script type='text/javascript'>
 $('div#foo');
 $.getLastSelector(); //'#foo'
 $('#iDoNotExist');
 $.getLastSelector(); // #iDoNotExist'
</script>

In your plugin you could do:

jQuery.fn.myPlugin = function(){
 selector = $.getLastSelector;
 alert(selector);
 this.each( function() {
  //do plugins stuff
 }
}

$('div').myPlugin(); //alerts 'div'
$('#iDoNotExist').myPlugin(); //alerts '#iDoNotExist'

But still:

$div = $('div');
$('foo');
$div.myPlugin(); //alerts 'foo'

Answer 3

If you're using firebug you could console.log(this) inside the function and see if the selector string is accessible somewhere in the object. Sorry I am not familiar with the jQuery API.

Answer 4

This will work if you want to access selector string in your function:

$(this).html();

This will also work if multiple selector are use,

for instance,

$('#id1,#id2').click(function(){
   alert($(this).html());
});

Answer 5

Maybe this solve your problem :

var $jqueryItems = $( ".my-selector" );
console.log( $jqueryItems.selector ); // display ".my-selector"

Answer 6

For those who want to get inside their plugins selector string given to jQuery, I am glad to have improved the great answer given by @Pim Jager:

1. As of now (latest version 3.2.1) there are 3 arguments in jQuery.fn.init function - selector, context, root - not two;
2. new keyword should be added to the return statement of jQuery.fn.init;
3. Inside your plugin the selectors are returned as a string by calling $(this).getSelector();

Finally, that's what I've got to work for me like a charm:

(function($, window, document, undefined) { 
    $.fn._init = $.fn.init
    $.fn.init = function( selector, context, root ) {
        return (typeof selector === 'string') ? new $.fn._init(selector, context, root).data('selector', selector) : new $.fn._init( selector, context, root );
    };
    $.fn.getSelector = function() {
        return $(this).data('selector');
    };
    $.fn.YOUR-PLUGIN = function() {
        var selector = $(this).getSelector(); // selectors string given to jQuery 
        // other code
    }
})(jQuery, window, document);

It works with jQuery versions as far as I am concerned (from 1.7.0 to 3.2.1).

PS. Works fine even with jQuery 1.2.3 available here on stackoverflow too. So, I guess, the following is ok for all jQuery versions if you want to get a jQuery selector's expression as text inside the plugin:

// our plugin
(function($, window, document, undefined) { 
    $.fn._init = $.fn.init
    $.fn.init = function( selector, context, root ) {
        return (typeof selector === 'string') ? new $.fn._init(selector, context, root).data('selector', selector) : new $.fn._init( selector, context, root );
    };
    $.fn.getSelector = function() {
        return $(this).data('selector');
    };
    $.fn.coolPlugin = function() {
        var selector = $(this).getSelector(); 
        if(selector) console.log(selector); // outputs p #boldText
    }
})(jQuery, window, document);

// calling plugin
$(document).ready(function() {
    $("p #boldText").coolPlugin();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<p>some <b id="boldText">bold text</b></p>

Answer 7

Please refer to my answer on a duplicate question: Intercepting selector at initialization time

Details: Fully working with any jQuery version even after deprecation and removal of "selector" property

My solution is to intercept the selector at the time of jQuery object initialization and in the same time maintain all other jQuery functionalities transparently all this using inheritance as the following:

$ = (function (originalJQuery) 
{
    return (function () 
    {
        var newJQuery = originalJQuery.apply(this, arguments);
        newJQuery.selector = arguments.length > 0 ? arguments[0] : null;
        return newJQuery;
    });
})($);

$.fn = $.prototype = jQuery.fn;

Usage:

var myAnchors = $('p > a');
var selector = myAnchors.selector;

Should produce: "p > a"

Tried it successfully with jQuery 3.4.1

Answer 8

I couldn't figure out how to get the reference to the string value of the selector provided to inside $('value_i_want_here') when bound to a function; seems like a tough problem. However, if you prefer testing in IE[x] there's always Firebug Lite which works really well utilizing console.log(var|val).

Answer 9

well, I'm still trying to figure out if you are trying to get the element name? or the id and/or class or all of it.

You can get element with this

var element =$(this).get(0);
var id = $(this).attr('id');
var class=$(this).attr('class');

not sure what happens if you have more than one class. might go into an array or something, and you could get that with the indexes.