获取当前的jQuery选择器字符串?

时间:2012-02-21 17:18:26

标签: jquery string jquery-selectors

调用自定义插件时,如何获取当前选择器字符串?

$('my_selector p').my_plugin();

想在我的脚本中输出my_selector p。我该如何访问这个字符串?

8 个答案:

答案 0 :(得分:36)

您可以使用selector属性:

$('my_selector p').selector // my_selector p

版本已弃用: 1.7已移除 1.9

答案 1 :(得分:14)

选择后弃用v.7.7:

如果你只是将id和类作为选择器处理,你可以使用以下内容:

var selector = (typeof($(this).attr('id')) !== 'undefined' || $(this).attr('id') !== null) ? '#' + $(this).attr('id') :  '.' + $(this).attr('class');

有更简洁的方法,但自从1.7以来由于浏览器之间的不一致而删除.selector以来,这一直是我的首选。

答案 2 :(得分:2)

被弃用,官方建议是将选择器添加为函数调用中的参数:https://api.jquery.com/selector/

  

需要在插件中使用选择器字符串的插件可能需要它作为方法的参数。例如,“foo”插件可以写成

$.fn.foo = function( selector, options ) { /* plugin code goes here */ };
  

使用该插件的人会写

$( "div.bar" ).foo( "div.bar", {dog: "bark"} );

冗余,是的,​​但它总是可靠的。

答案 3 :(得分:1)

jQuery.fn.getSelector = function() {
        return this.data('selector');
};

答案 4 :(得分:1)

如果部门已弃用,请使用

index = document.getElementById('category').value
select = $("#category option[value=#{index}]")[0].innerHTM

只需两行代码

或者如果你真的很便宜

select = $("#category option[value=#{document.getElementById('category').value}]")[0].innerHTML

答案 5 :(得分:1)

最好的工作习惯是

function mySelector(selector) {
    return $.extend($(selector),{"selector":selector});
}

这将返回经典的jquery对象,就像$()一样

mySelector(".myClass")

这将返回选择器的字符串

mySelector(".myClass").selector

答案 6 :(得分:0)

Extending to kevinmicke's answer : You can get the selector in your event object that you pass on callback functions.

In callback functions

event.handleObj.selector

Example:

You'll get the selector string in e.handleObj.selector

    $( '.container' )
    .on('change', 'select.mySelector', function (e) {
        console.log(JSON.stringify(e));
        $('.selector').text(e.handleObj.selector);
        $('.value').text($(this).val());
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <select class="mySelector">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <h3>Your Selector: <span class="selector"></span></h3>
  <h3>Selected Value: <span class="value"></span></h3>
  
</div>

Console Log gives an object like this:

{
    // ...skipped lines
    "handleObj": {
        "type": "change",
        "origType": "change",
        "guid": 1,
        "selector": "select.mySelector",
        "needsContext": false,
        "namespace": ""
    }
}

答案 7 :(得分:0)

即使弃用并删除了“ 选择器”属性,也可以完全使用任何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成功尝试