2011-06-17 31 views
6

在我的HTML,我有一个div像这样:如何将类数组应用于classList.contains?

<div class="a b c"></div> 

在我的JavaScript,我有一个类数组的,我很感兴趣:

var goodClasses = ['a', 'c']; 

在好的浏览器,我可以使用真棒classList功能来测试我的div是否有适当的类:

return div.classList.contains(goodClasses[0], goodClasses[1]); 

这是正常的,但我真的很想做的就是这样的事情(语法是愚蠢的,但这是一般的想法):

return div.classList.contains.apply(div, goodClasses); 

是否有某种方式来做到这一点?如果我必须循环访问我的数组,那么classList会变得不那么酷。

+0

你会考虑的JQuery:

不支持它可以使用the MDC compatibility fix
return goodClasses.every(function(c) { return div.classList.contains(c); }); 

浏览器? – js1568

+2

它不会像你想象的那样工作。无论如何,classList.contains只考虑第一个参数。所有其他人都被忽略。 'div.classList.contains(goodClasses [0],goodClasses [1]);'不**工作。请参阅:http://jsfiddle.net/fkling/VcrnD/1/。你**必须**迭代。 –

回答

11

由于@Felix Kling正确指出,classList.contains只接受一个参数。

如果你支持的浏览器支持Arrayevery()方法,你可以这样做:

if (!Array.prototype.every) 
{ 
    Array.prototype.every = function(fun /*, thisp */) 
    { 
    "use strict"; 

    if (this === void 0 || this === null) 
     throw new TypeError(); 

    var t = Object(this); 
    var len = t.length >>> 0; 
    if (typeof fun !== "function") 
     throw new TypeError(); 

    var thisp = arguments[1]; 
    for (var i = 0; i < len; i++) 
    { 
     if (i in t && !fun.call(thisp, t[i], i, t)) 
     return false; 
    } 

    return true; 
    }; 
} 
+1

+1不错的方法.... –

+0

classList甚至不是一个数组。 – Robert

+1

@罗伯特:我没有说过。如果你看看这个问题,'goodClasses' *是一个数组,并且OP想要使用'.apply()'直接将该数组作为参数应用于'contains()'。这是行不通的,因为'contains()'只接受一个参数。所以我给出的解决方案是在Array上使用'.every()',并且对'.every()'进行回调测试Array中的每个项目,并且如果每个类名称都返回,则返回'true'的最终结果数组通过了'.contains()'测试,如果一个或多个测试没有通过'false'。 – user113716

相关问题