jQuery 自定义选择器，“未定义”

Question

我正在尝试制作一个 jQuery ui 日历，以便在单击日期时进行 ajax 调用， 但是几天前我遇到了一个问题。 我发现了一个据说可以执行此操作的代码 sn-p，但我发现它使用 jQuery 自定义选择器。该代码给了我一个错误，所以我开始深入研究自定义选择器以了解有关它们的更多信息。到目前为止，我还无法找出为什么会出现这种奇怪的行为。

这是一张希望澄清问题的图片，我会在它之后解释更多

我已经在控制台输入了

$('.ui-datepicker-calendar td a:test(3)')

正如你所见，我 meta2 和 stack2 是未定义的，还有一件更奇怪的事情，为什么 index2 返回一个 #document ，它应该包含元素数组的索引。

此外，元素 (el2) 甚至都不是正确的元素。 看一下，我叫

$('.ui-datepicker-calendar td a:test(3)')

这应该选择日历中的所有日期，并且在第一个循环中，console.log 应该打印出这个

<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="8" data-year="2012"><a class="ui-state-default" href="#">1</a></td>

但是我得到了整个文档中的第一个“a”标签，在这种情况下它是上个月的标签（如图所示）。

如果有人能对这种情况有所了解，请做。 哦，还有一件事我忘记了

meta2 ，它应该包含这个

[
    ':test(argument)', // full selector
    'test',            // only selector
    '',                // quotes used
    'argument'         // parameters
]

在我的情况下，它又是未定义的......

我将分享我的 javascript 代码，希望对您有所帮助

<script>
    $(function()
    {
        $.expr[":"].test = function(el2,index2,meta2,stack2)
        {
            debugger;
            console.log(el2);
            console.log(index2);
            console.log(meta2);
            console.log(stack2);
        }
    })

    $(function()
    {
        function getJsonDate(year, month)
        {
            $.getJSON('dates.php?year='+year+'&month='+month, function(data)
            {
                var i = 0;
                for (i = 0; i < data.data.length; i++)
                {
                    debugger;
                    var myDay = data.data[i]['d'];
                    $('.ui-datepicker-calendar td a:exactly('+data.data[i]['d']+')')
                    .css({color: '#f00'})
                    .attr('href',data.data[i]['link'])
                    .parent().attr('onclick','');
                }
            });
        }
        $.expr[":"].exactly = function(el, index, meta, stack) 
        {
            debugger;
            console.log(el);
            console.log(index);
            console.log(meta);
            console.log(stack);
            var s = meta[3];
            if (!s) return false;
            return eval("/^" + s + "$/i").test($(el).text());
        };
        $('#datepicker').datepicker(
        {
            inline: true,
            onSelect: function(dateText, inst) 
            {
                Date.prototype.toString = function () {return isNaN (this) ? 'NaN' : [this.getDate(), this.getMonth(), this.getFullYear()].join('/')}
                d = new Date(dateText);
                getJsonDate(d.getFullYear(), d.getMonth()+1);
            },
            onChangeMonthYear: function(year, month, inst) 
            {
                //alert(year);
                //alert(month);
                getJsonDate(year, month);
            }
        });
    });
</script>

Answer 1

最短的解释是“jQuery 1.8.0 有一个错误，升级到 1.8.1 进行修复”，但这并不能完全回答所有问题。

jQuery 1.8.x 有一个显着升级的“Sizzle”引擎，它用于选择器。作为此更改的一部分，调用自定义选择器的方式已更改，而且许多选择器的处理方式已更改。关于规则处理顺序的各种假设不再成立，等等。在各种用例中也明显更快。

即使升级到 1.8.1，在处理您提供的示例时，您仍然会看到与 1.7.2（1.8.x 之前的系列中的最新版本）中的情况有很大不同。这解释了您在选择“页面上的第一个 元素”时看到的内容。也就是说：您对自定义选择器如何工作的期望不是它们实际如何工作，如果您允许循环继续（而不是在第一次迭代时调用“调试器”），您会看到它实际上正在通过所有 元素）。简而言之：Sizzle 不保证将调用各种规则的顺序，只保证结果将匹配所有规则。

如果您确定您的自定义规则的效率会低于其他规则（可能是因为您确信其他规则会严重减少匹配元素的数量），您可以通过选择它们来强制这些规则首先运行，然后仅在该元素子集上调用 .find()，例如：

$(".ui-datepicker-calendar").find("td a:test(3)");

至于“堆栈”未定义，正如 Kevin B 指出的那样，虽然 1.8.1 更新恢复了向后兼容性，但 API 发生了变化，看起来“堆栈”不再传递给伪.这确实是有道理的，因为调用测试的顺序发生了变化。即：当您到达堆栈时，堆栈是空的，因为“查看是否有任何 元素与此伪选择器匹配”是第一个被处理的规则。测试应该始终是自包含的，因此堆栈无论如何都不会真的很有用（可能只会导致混乱）。

那么如果 1.8.1 恢复了向后兼容，那么创建伪选择器的前向兼容方法是什么？正如你在the documentation for Sizzle's pseudo-selectors 中看到的，从 jQuery 1.8 开始，创建伪选择器的首选方法是“createPseudo”方法（$.expr.createPseudo），它更喜欢使用闭包而不是“meta”参数。因此，对于您的特定示例，执行它们的“新”方法将是：

$.expr[":"].test = $.expr.createPseudo(function( tomatch )
{
        return function( el2 )
        {
            debugger;
            console.log(el2); // not much else to see here
        };
})

其中“tomatch”是 :test(...) 选择器的参数。如您所见，您正在寻找的额外参数在这种新语法中不再需要。至于更有用的东西：

$.expr[":"].exactly = $.expr.createPseudo(function( s )
{
    return function(el)
    {
        if(!s) return false;
        return eval("/^" + s + "$/i").test($(el).text());
    };
});

这个版本的“exactly”应该兼容1.8+，是首选的*做事方式。

我认为，即使 jQuery 版本/api 出现了问题，您提供的代码仍然不能完全按照您的意愿执行，因为日期选择器可能会根据插件的突发奇想进行重建。仍有一小段时间您可以判断出所需元素确实按预期突出显示，因此选择器本身似乎确实有效。

以下是基于您提供的示例的完整示例。您可以通过更改 1.7.2、1.8.0 和 1.8.1 之间使用的 jQuery 版本来查看行为差异。为了跨版本的兼容性，对 $.expr.createPseudo 的测试已添加到伪选择器函数分配中。注意所有的“调试器；”语句已被注释掉，因为在 datepicker 中的所有日期链接的每次迭代中都有一个断点变得相当乏味，并且 getJSON 调用已被模拟以允许测试是独立的。

<html>
<head>
    <title>jQuery custom selector, "undefined"</title>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> -->
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    <link rel="stylesheet"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" />
    <script>
    $(function()
    {
        $.expr[":"].test = $.expr.createPseudo ?
            $.expr.createPseudo(function( tomatch )
            {
                return function( el2 )
                {
//                  debugger;
                    console.log(el2);
                };
            }) :
            function(el2,index2,meta2,stack2)
            {
    //          debugger;
                console.log(el2);
                console.log(index2);
                console.log(meta2);
                console.log(stack2);
            };
    })

    $(function()
    {
        function getJsonDate(year, month)
        {
            //$.getJSON('dates.php?year='+year+'&month='+month, function(data)
            //{
                var data = {data:[
                    {d:1,link:"a"},
                    {d:15,link:"b"},
                    {d:25,link:"c"}
                ]};
                var i = 0;
                for (i = 0; i < data.data.length; i++)
                {
//                  debugger;
                    var myDay = data.data[i]['d'];
                    $('.ui-datepicker-calendar td a:exactly('+data.data[i]['d']+')').
                        css({color: '#f00'}).
                        attr('href',data.data[i]['link']).
                        parent().attr('onclick','');
                }
            //});
        }

        $.expr[":"].exactly = $.expr.createPseudo ?
            $.expr.createPseudo(function( s )
            {
                return function(el)
                {
                    if(!s) return false;
                    return eval("/^" + s + "$/i").test($(el).text());
                };
            }) :
            function(el, index, meta, stack) 
            {
//              debugger;
                console.log(el);
                console.log(index);
                console.log(meta);
                console.log(stack);
                var s = meta[3];
                if (!s) return false;
                return eval("/^" + s + "$/i").test($(el).text());
            };

        $('#datepicker').datepicker(
        {
            inline: true,
            onSelect: function(dateText, inst) 
            {
                Date.prototype.toString = function () {
                    return isNaN (this) ?
                        'NaN' :
                        [this.getDate(), this.getMonth(), this.getFullYear()].join('/')
                }
                d = new Date(dateText);
                getJsonDate(d.getFullYear(), d.getMonth()+1);
            },
            onChangeMonthYear: function(year, month, inst) 
            {
                //alert(year);
                //alert(month);
                getJsonDate(year, month);
                return false;
            }
        });
    });
    </script>
    <script>
    (function($){$(function(){
        $("<input />").
            attr({type:"button", value: "run test selector"}).
            click(function(){
                $(".ui-datepicker-calendar td:test(3) a");

                // Or, if you are certain that your test will be less-efficient than an exclusion based
                // on parents, you could do:
                //  $(".ui-datepicker-calendar").find("td a:test(3)");
            }).
            appendTo("body");
    })}(window.jQuery));
    </script>
</head>
<body>
    <a href="#ignoreThisLink">.</a>
    <a href="#ignoreThisToo">.</a>
    <p>
        (first, click the input box to cause the datepicker to initialise)
    </p>
    <input type="text" id="datepicker" />
</body>
</html>

我希望这有助于阐明一些事情。

*我说这是“首选”方法，但您仍在使用“eval”。这是非常不鼓励的，因为它很慢并且可能导致意外/令人惊讶/危险的结果。基于字符串构建正则表达式的更好方法是

return (new RegExp("^" + s + "$", "i")).test($(el).text());

尽管这样也有问题，因为“s”可能包含 RegExp 特殊字符。但是，在这种特殊情况下，甚至不需要正则表达式，并且可以通过以下方式更有效地测试事物：

return String(s).toUpperCase() === $(el).text().toUpperCase();

您甚至可以通过将转换滚动到闭包中来节省更多，为您提供以下全部功能：

$.expr[":"].exactly = $.expr.createPseudo(function( s )
{
        if(!s) return function(){ return false; };
        s = String(s).toUpperCase();

        return function(el)
        {
            return (s === $(el).text().toUpperCase());
        };
});

Answer 2

jquery ui datepicker 具有这种功能的钩子。与其尝试定位构成日期的 DOM 元素，不如绑定到选择一个的行为。 jsFiddle

$('#datepicker').datepicker({
    onSelect: function(dateText, inst){
        //awesome ajax stuff based on dateText
    }
});​

编辑评论：如果您需要设置特定日期的样式，那么您应该通过在绘制之前应用自定义类来定位它。 jsFiddle

$('#datepicker').datepicker({
    beforeShowDay: function(date){
        return [true, 'date-' + date.getDate() ];
    }
});