Comment obtenir l'expression d'un sélecteur jQuery sous forme de texte?

Question

J'ai un sélecteur jQuery qui a une fonction chaînée.

Dans la fonction, je souhaite accéder au texte représentant l'expression du sélecteur.

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

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

J'ai simplifié dans cet exemple de code ce que je veux réellement faire. J'écris un plug-in et j'ai besoin d'accéder au sélecteur pour lequel le jeu enveloppé a été créé. Évidemment, dans cet exemple particulier, j'ai accès à & «Chat, chien»! Parce que je l'ai écrit. Alors, imaginez ceci dans un plugin.

C'est un peu délicat à chercher sur Google.

modifier: la propriété "sélecteur" est malheureusement obsolète. http://jquery.com/upgrade-guide/1.9/ # selector-property-on-jquery-objects

Answer 1

Il y a un attribut 'sélecteur' dans l'objet jQuery, mais je ne suis pas sûr qu'il soit toujours disponible.

Answer 2

Ceci est loin d’être optimal mais fonctionne dans certains cas. Vous pouvez effectuer les opérations suivantes:

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');
};

Ceci retournera le dernier sélecteur utilisé pour l'élément. Mais cela ne fonctionnera pas sur des éléments non existants.

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

Ceci fonctionne avec jQuery 1.2.6 et 1.3.1 et éventuellement d’autres versions.

Aussi:

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

Modifier
Si vous vérifiez immédiatement après l'utilisation du sélecteur, vous pouvez utiliser les éléments suivants dans votre plug-in:

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 );
};

Ensuite, les éléments suivants fonctionneraient:

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

Dans votre plugin, vous pouvez faire:

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

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

Mais quand même:

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

Answer 3

Si vous utilisez firebug, vous pouvez console.log(this) dans la fonction et voir si la chaîne de sélecteur est accessible quelque part dans l'objet. Désolé, je ne connais pas bien l'API jQuery.

Answer 4

Ceci fonctionnera si vous voulez accéder à la chaîne de sélecteur dans votre fonction:

$(this).html();

Cela fonctionnera également si plusieurs sélecteurs sont utilisés,

par exemple,

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

Answer 5

Peut-être que cela résoudra votre problème:

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

Answer 6

Pour ceux qui veulent entrer dans la chaîne de sélection des plugins donnée à jQuery, je suis heureux d’avoir amélioré l’excellente réponse donnée par @Pim Jager:

1. A partir de maintenant (dernière version 3.2.1), il y a 3 arguments dans jQuery.fn.init fonction - selector, context, root - pas deux;
2. new mot-clé doit être ajouté à l'instruction de retour de $(this).getSelector();;
3. Dans votre plugin, les sélecteurs sont renvoyés sous forme de chaîne en appelant <=>

Enfin, c'est ce que je dois faire pour moi comme un charme:

(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);

Cela fonctionne avec les versions de jQuery en ce qui me concerne (de 1.7.0 à 3.2.1).

PS . Fonctionne bien même avec jQuery 1.2.3 disponible ici sur stackoverflow également. Donc, je suppose que ce qui suit convient à toutes les versions de jQuery si vous souhaitez obtenir une expression de sélecteur jQuery sous forme de texte à l'intérieur du plug-in:

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

Je ne savais pas comment obtenir la référence à la valeur de chaîne du sélecteur fourni à l'intérieur de $ ('value_i_want_here') lorsqu'elle était liée à une fonction; semble être un problème difficile. Toutefois, si vous préférez tester dans IE [x], il existe toujours Firebug Lite , qui fonctionne vraiment bien en utilisant console.log (var | val).

Answer 8

eh bien, j'essaie toujours de savoir si vous essayez d'obtenir le nom de l'élément? ou l'id et / ou la classe ou la totalité de celle-ci.

Vous pouvez obtenir un élément avec ce

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

ne sais pas ce qui se passe si vous avez plus d'une classe. pourrait aller dans un tableau ou quelque chose, et vous pourriez l'obtenir avec les index.