jQuery自定义选择器代码

时间:2012-01-13 06:50:28

标签: jquery jquery-plugins jquery-selectors

我正在学习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 function的参数是。

第一次成为

  

group:function(element,index,matches,set)

元素为tr index为0 mathces成为[“:group(3)”,“group”,“”,“3”] 设置为[tr,tr,tr,tr,tr]

现在我解读了set,​​每个tbody标签都有tr的数量,成为set array。但是请告诉我parseInt(匹配[3],10)是如何工作的?

我想问一下jQuery是如何制作匹配数组的。我只想写:组(3)。如何将值设置为参数列表中的这些值?

以下是html的片段

<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>

由于

1 个答案:

答案 0 :(得分:1)

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