jQuery 自定义选择器代码

Question

我正在学习 jQuery，在阅读书籍时，有一段代码，您正在其中制作自定义选择器。这是代码

(function($) {
    $.extend($.expr[':'], {
        group: function(element, index, matches, set) {
            var num = parseInt(matches[3], 10);
            if (isNaN(num)) {
                return false;
            }
            return index % (num * 2) < num;
        }
    });
})(jQuery);

它正在调用

$(document).ready(function() {
    function stripe() {
        $('#news').find('tr.alt').removeClass('alt');
        $('#news tbody').each(function() {
            $(this).children(':visible').has('td')
                .filter(':group(3)').addClass('alt');
        });
    }

    stripe();

});

我知道 .filter() 会针对每个子元素运行。假设如果我的 tbody 元素有 4 个 tr（行），那么 .filter 会为每个 tr（隐式迭代）运行。 现在当调用 .filter(':group(3)') 时，我注意到传递给 :group 函数的参数是。

第一次变成了

组：函数（元素、索引、匹配、集合）

元素为 tr，索引为 0，ma​​thces 变为 [":group(3)", "group", "", "3"] 和 set 变成 [tr, tr, tr, tr, tr]

现在我明白了，每个 tbody 标记都有 tr 的数量，它变成了 set 数组。但也请告诉我 parseInt(matches[3], 10) 是如何工作的？

我想问一下jQuery是如何制作matches数组的。我只是写：组（3）。参数列表中这些值的匹配值是如何设置的？

这里是html的sn-p

<table id="news">
    <thead>
        <tr>
            <th>Date</th>
            <th>Headline</th>
            <th>Author</th>
            <th>Topic</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th colspan="4">2011</th>
        </tr>
        <tr>
            <td>Apr 15</td>
            <td>jQuery 1.6 Beta 1 Released</td>
            <td>John Resig</td>
            <td>Releases</td>
        </tr>
        <tr>
            <td>Feb 24</td>
            <td>jQuery Conference 2011: San Francisco Bay Area</td>
            <td>Ralph Whitbeck</td>
            <td>Conferences</td>
        </tr>
        <tr>
            <td>Feb 7</td>
            <td>New Releases, Videos &amp; a Sneak Peek at the jQuery UI Grid</td>
            <td>Addy Osmani</td>
            <td>Plugins</td>
        </tr>
        <tr>
            <td>Jan 31</td>
            <td id="release">jQuery 1.5 Released</td>
            <td>John Resig</td>
            <td>Releases</td>
        </tr>
        <tr>
            <td>Jan 30</td>
            <td>API Documentation Changes</td>
            <td>Karl Swedberg</td>
            <td>Documentation</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <th colspan="4">2010</th>
        </tr>
        <tr>
            <td>Nov 23</td>
            <td>Team Spotlight: The jQuery Bug Triage Team</td>
            <td>Paul Irish</td>
            <td>Community</td>
        </tr>
        <tr>
            <td>Oct 4</td>
            <td>New Official jQuery Plugins Provide Templating, Data Linking and Globalization</td>
            <td>John Resig</td>
            <td>Plugins</td>
         </tr>
         <tr>
             <td>Sep 4</td>
             <td>The Official jQuery Podcast Has a New Home</td>
             <td>Ralph Whitbeck</td>
             <td>Documentation</td>
         </tr>
         <tr>
             <td>Aug 24</td>
             <td>jQuery Conference 2010: Boston</td>
             <td>Ralph Whitbeck</td>
             <td>Conferences</td>
         </tr>
         <tr>
             <td>Aug 13</td>
             <td>The jQuery Project is Proud to Announce the jQuery Mobile Project</td>
             <td>Ralph Whitbeck</td>
             <td>Plugins</td>
         </tr>
         <tr>
             <td>Jun 14</td>
             <td>Seattle jQuery Open Space and Hack Attack with John Resig</td>
             <td>Rey Bango</td>
             <td>Conferences</td>
         </tr>
         <tr>
             <td>Mar 16</td>
             <td>Microsoft to Expand its Collaboration with the jQuery Community</td>
             <td>John Resig</td>
             <td>Miscellaneous</td>
         </tr>
         <tr>
             <td>Mar 15</td>
             <td>jQuery Conference 2010: San Francisco Bay Area</td>
             <td>Mike Hostetler</td>
             <td>Conferences</td>
         </tr>
         <tr>
             <td>Jan 14</td>
             <td>jQuery 1.4 Released</td>
             <td>John Resig</td>
             <td>Releases</td>
         </tr>
         <tr>
             <td>Jan 8</td>
             <td>14 Days of jQuery and the New API Browser</td>
             <td>John Resig</td>
             <td>Documentation</td>
         </tr>
     </tbody>

     <tbody>
         <tr>
             <th colspan="4">2005</th>
         </tr>
         <tr>
             <td>Dec 17</td>
             <td>JSON and RSS</td>
             <td>John Resig</td>
             <td>Documentation</td>
         </tr>
         <tr>
             <td>Dec 14</td>
             <td>Google Homepage API</td>
             <td>John Resig</td>
             <td>Miscellaneous</td>
         </tr>
         <tr>
             <td>Dec 13</td>
             <td>XPath and CSS Selectors</td>
             <td>John Resig</td>
             <td>Miscellaneous</td>
         </tr>
         <tr>
             <td>Dec 12</td>
             <td>Sparklines with JavaScript and Canvas</td>
             <td>John Resig</td>
             <td>Miscellaneous</td>
         </tr>
     </tbody>

 </table>

谢谢

Answer 1

在您的示例中，matches[3] == "3"。所以parseInt(matches[3], 10); 会将“3”转换为整数 3（基数 10 = 十进制）。