web-dev-qa-db-ja.com

jQueryセレクターの式をテキストとして取得するにはどうすればよいですか？

連鎖関数を持つjQueryセレクターがあります。

関数内で、セレクターの式を表すTEXTにアクセスしたいと思います。

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

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

このコードサンプルでは、​​実際にやりたいことを単純化しすぎています。プラグインを作成していますが、ラップされたセットが作成されたセレクターにアクセスする必要があります。明らかに、この特定の例では、私が書いたので「猫の犬」にアクセスできます。だから、これがプラグインにあることを想像してみてください。

これをグーグルで検索するのは少し注意が必要です。

edit： 'selector'プロパティは残念ながら非推奨になりました。 http://jquery.com/upgrade-guide/1.9/#selector-property-on-jquery-objects

jqueryjquery-selectors
31
Simon_Weaver

JQueryオブジェクトには「selector」属性がありますが、常に使用できるかどうかはわかりません。

18
Ryan Doherty

これは最適とはほど遠いですが、場合によっては機能します。次のことができます。

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

これにより、要素に使用された最後のセレクターが返されます。ただし、存在しない要素では機能しません。

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

これは、jQuery 1.2.6と1.3.1、および場合によっては他のバージョンで機能します。

また：

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

編集
セレクターを使用した直後にチェックする場合は、プラグインで次を使用できます。

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

次に、以下が機能します。

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

プラグインでは、次のことができます。

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

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

それでも：

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

Firebugを使用している場合は、関数内でconsole.log(this)して、オブジェクトのどこかでセレクター文字列にアクセスできるかどうかを確認できます。申し訳ありませんが、jQueryAPIに精通していません。

3
Luca Matteis

これは、関数でセレクター文字列にアクセスする場合に機能します。

$(this).html();

これは、複数のセレクターが使用されている場合にも機能します。

例えば、

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

多分これはあなたの問題を解決します：

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

JQueryに与えられたプラグインセレクター文字列の内部に入りたい人のために、@ PimJagerによって与えられた素晴らしい答えを改善できてうれしいです：

  1. 現在（最新バージョン3.2.1）、_jQuery.fn.init_関数には3つの引数があります--_selector, context, root_- 2つではありません。
  2. newキーワードを_jQuery.fn.init_のreturnステートメントに追加する必要があります。
  3. プラグイン内では、$(this).getSelector();を呼び出すことにより、セレクターが文字列として返されます。

最後に、それは私が魅力のように私のために働かなければならないものです：

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

私に関する限り、jQueryバージョン（1.7.0から3.2.1）で動作します。

[〜＃〜] ps [〜＃〜]。ここでstackoverflowで利用できるjQuery1.2.3でも正常に動作します。したがって、プラグイン内でjQueryセレクターの式をテキストとして取得する場合は、すべてのjQueryバージョンで次のことが問題ないと思います。

_// 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>_
1
curveball

関数にバインドされたときに$（ 'value_i_want_here'）内に提供されたセレクターの文字列値への参照を取得する方法を理解できませんでした。難しい問題のようです。ただし、IE [x]でのテストを好む場合は、常に Firebug Lite があり、console.log（var | val）を利用すると非常にうまく機能します。

0
David Mosher