jquery - 如何将 jQuery 选择器的表达式作为文本获取？

Question

我有一个 jQuery 选择器，它有一个链式函数。

在函数内部，我想访问表示选择器表达式的 TEXT。

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

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

我在这个代码示例中过度简化了我真正想做的事情。我正在编写一个插件，我需要访问已为其创建包装集的选择器。显然，在这个特定的例子中，我可以使用“猫狗”，因为我写了它。所以想象一下这是在一个插件中。

谷歌这个有点棘手。

编辑：不幸的是，现在不推荐使用“选择器”属性。http://jquery.com/upgrade-guide/1.9/#selector-property-on-jquery-objects

score 18 · Accepted Answer

18

jQuery 对象中有一个“选择器”属性，但我不确定它是否始终可用。

于 2009-02-01T05:18:52.107 回答

score 8 · Accepted Answer

这远非最佳，但在某些情况下有效。您可以执行以下操作：

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'

score 3 · Accepted Answer

如果您使用的是 firebug，您可以console.log(this)在函数内部查看选择器字符串是否可以在对象中的某处访问。抱歉，我不熟悉 jQuery API。

score 2 · Accepted Answer

如果您想在函数中访问选择器字符串，这将起作用：

$(this).html();

如果使用多个选择器，这也将起作用，

例如，

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

score 1 · Accepted Answer

也许这可以解决您的问题：

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

score 1 · Accepted Answer

对于那些想要了解他们提供给 jQuery 的插件选择器字符串的人，我很高兴改进了@Pim Jager 给出的出色答案：

截至目前（最新版本 3.2.1），jQuery.fn.init 函数中有 3 个参数selector, context, root——不是两个；
new关键字应该添加到 ; 的返回语句 jQuery.fn.init中
在您的插件中，选择器通过调用以字符串形式返回 $(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）。

附言。即使使用 stackoverflow 上的 jQuery 1.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>

score 1 · Accepted Answer

请参考我对重复问题的回答：在初始化时拦截选择器

详细信息： 即使在弃用和删除“选择器”属性之后，也可以完全使用任何 jQuery 版本

我的解决方案是在 jQuery 对象初始化时拦截选择器，同时使用继承透明地维护所有其他 jQuery 功能，如下所示：

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

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

用法：

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

应该产生："p > a"

使用 jQuery 3.4.1 成功尝试

score 0 · Accepted Answer

当绑定到函数时，我无法弄清楚如何获取对 $('value_i_want_here') 内部提供的选择器的字符串值的引用；似乎是一个棘手的问题。但是，如果您更喜欢在 IE[x] 中进行测试，总有Firebug Lite可以很好地利用 console.log(var|val)。

score -2 · Accepted Answer

好吧，我仍在试图弄清楚您是否正在尝试获取元素名称？或 id 和/或 class 或全部。

你可以用这个获得元素

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

不知道如果你有不止一门课会发生什么。可能会进入一个数组或其他东西，你可以通过索引得到它。

jquery - 如何将 jQuery 选择器的表达式作为文本获取？

9 回答 9

Related

Reference