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.

Answer 1

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 2

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.

Answer 3

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

Answer 4

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 5

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 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>