函数二:hasClass()

有时候,我们需要判断节点是否含有我们要寻找的class,这里,我们想到原生的JS给我们提供了className这个方法,既可以读又可以写。但class是可以组合的,也就是说,会有这种情况:class="test1 test2",这样通过className获取出来的,则就是一个"test1 test2"字符串了,达不到我们要查找指定的class的目的。所以,我们有必要写一个可以获取指定class的函数。

思路:既然className能获取一整个class字符串,那我们能不能通过这一个字符串寻找到我们指定要的class字符串呢?我们知道,组合class是通过一个空格或者多个空格组合的,那么,是不是可以利用这个空格将所有class放进一个数组,然后遍历这个数组匹配到我们指定的class呢?答案是肯定的,根据以上分析,我们可以组织到下面的步骤:

1.利用className的特性将各个class存进数组;

2.遍历数组,匹配class;

3.成功匹配返回true,否则返回false。

现在,我们就可以将上面的思路用代码来实现,实现如下:

function hasClass(className,node){
        var classNames = node.className.split(/\s+/);    //步骤1
        
        for(var i = 0; i < classNames.length; i++){         //步骤2
            if(classNames[i] == className){
                return true;
            }
        }
        
        return false;
}  

测试函数代码如下:

<script type="text/javascript">
    function hasClass(className,node){
        var classNames = node.className.split(/\s+/);
        
        for(var i = 0; i < classNames.length; i++){
            if(classNames[i] == className){
                return true;
            }
        }
        
        return false;
    }  
    window.onload = function(){
        var test = document.getElementById('test');
        alert(hasClass('test1',test));    //true
        alert(hasClass('test2',test));    //true
        alert(hasClass('test3',test));    //false
    }
</script>
</head>
<body>
    <div id="test" class="test1 test2">test</div>
</body>

////////////////////////////////////////////////  华丽丽的分隔线///////////////////////////////////////////////////////

2012.3.5 add

一个更简短的写法:

1 var hasClass = function(element,className){
2 return new RegExp("(^|\\s)"+className+"(\\s|$)").test(element.className);
3 }



posted @ 2011-04-24 10:30  肥杜  阅读(3729)  评论(1编辑  收藏  举报