How do I get a jQuery selector's expression as

2020-01-27 06:44发布

问题:

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

回答1:

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



回答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'


回答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.



回答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());
});


回答5:

Maybe this solve your problem :

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


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



回答7:

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



回答8:

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.