2010,正心,修身,养性。
焚我残躯,毁我意志,复我记忆。
子曰:“知之者不如好之者,好之者不如乐之者。”
子曰:“吾尝终日不食,终夜不寝,以思,无益,不如学也。”

快乐的生活,快乐的分享。

YAHOO.util.Dom.getElementsByClassName的一点小改进~

由于昨天遇到的一个问题,才有了这种想法。目前的YAHOO.util.Dom.getElementsByClassName仅支持一个class的寻找,如果我想寻找多个class的话就要多操作几次了,而且如果要给这些节点添加相同的事件的话,又要首先把它们放到一个数组,然后给新的数组添加事件,或者分别给各个数组添加事件,挺麻烦的,所以给YAHOO.util.Dom.getElementsByClassName做一点小改进,让它可以找到包含任何一个所给class的所有节点。

getElementsByClassName: function(className, tag, root, apply, o, overrides) {
    className = lang.trim(className);
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document;
    if (!root) {
        return [];
    }
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        hasClass = Y.Dom.hasClass;
    if(className.indexOf('|')>0) {
        var classnames = className.split('|');
        //找到所有节点
        for (var i = 0, len = elements.length; i < len; ++i) {
            for (var j = 0; j < classnames.length; ++j) {
                if ( hasClass(elements[i], lang.trim(classnames[j])) ) {
                    nodes[nodes.length] = elements[i];
                }
            }
        }
        //剔除相同的节点
        for (var k = 0; k < nodes.length; k++) {
            for(var l = k+1; l < nodes.length; l++) {
                if(nodes[k] == nodes[l]) {
                    nodes.splice(l,1);
                }
            }
        }
    } else {
        for (var i = 0, len = elements.length; i < len; ++i) {
            if ( hasClass(elements[i], className) ) {
                nodes[nodes.length] = elements[i];
            }
        }

    }
    if (apply) {
        Y.Dom.batch(nodes, apply, o, overrides);
    }
    return nodes;
}

用法很简单,就是在class之间加上“|”,比如:YAHOO.util.Dom.getElementsByClassName('hehe|haha|heihei')。

标签: ,

这篇文章发布于 2009年04月14日,星期二,07:46,归类于 YUI。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论,或者从您的站点trackback

7 条评论

  • 明城 (2009.04.14 @ 09:50)

    其实 getElementsByClassName 支持正则表达式操作,相关代码

    var getClassRegEx = function(className) {
    var re = reClassNameCache[className];
    if (!re) {
    re = new RegExp(‘(?:^|\\s+)’ + className + ‘(?:\\s+|$)’);
    reClassNameCache[className] = re;
    }
    return re;
    };

    所以可得出 className 可以是正则表达式的一部分,那么去多个就很好搞定了。 :^)

  • 小马 (2009.04.14 @ 15:54)

    注意,YUI 2.7.0 里getElementsByClassName()的第一个参数支持正则表达式,所以,你可以直接这么调用:

    YAHOO.util.Dom.getElementsByClassName(/hehe|haha|heihei/)。

    try it!

  • 小马 (2009.04.14 @ 15:55)

    妈的,被抢沙发了!

  • 遇春 (2009.04.14 @ 16:14)

    单独提一个局部小问题:
    ———————–
    //剔除相同的节点
    for (var k = 0; k < nodes.length; k++) {
    for(var l = k+1; l < nodes.length; l++) {
    if(nodes[k] == nodes[l]) {
    nodes.splice(l,1);
    }
    }
    }
    ————————-
    这段代码跑起来,如果真的有相同节点的话会出错的。一般遍历去剔除列表里的元素要从后往前遍历。

  • 南芝 (2009.04.14 @ 20:28)

    @小马 @明城 感谢哈。。我记得上次小马有说。。我当时还看了。。。然后就忘了。。。丢人了哈~

  • 南芝 (2009.04.14 @ 20:30)

    @遇春 感谢指正哈~

  • rainoxu (2009.04.17 @ 16:54)

    我觉得用半角逗号更符合习惯一点,呵呵~~~

雁过留声

Rss
渴望孩子的纯真、诚实、可爱、无忧无虑。。。。。。

这位姐姐,你好,你的浏览器版本太低了,为了避免您中毒,请您升级您的浏览器!