Question

我发现了这个功能：

document.getElementsByClassName = function(c){
    for(var i=0,a=[],o;o=document.body.getElementsByTagName('*')[i++];){
        if(RegExp('\\b'+c+'\\b','gi').test(o.className)){
            a.push(o);
        }
    }

    return a;
}

如何按类隐藏所有元素？

我试过了：

var array = document.getElementsByClassName("hide");

for(var i = 0; i < array.length; i++)
{
    $(array[i]).hide();
}

但我收到了错误：

Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

Answer 1

jQuery允许使用CSS选择器，从而消除了对手工构建循环和正则表达式的需求。要隐藏类fooey的元素，只需执行

$('.fooey').hide();

Answer 2

如果你使用的是vanilla JavaScript，那么：

var array = document.getElementsByClassName("hide");

for(var i = 0; i < array.length; i++)
{
    array[i].style.display = 'none';
    array[i].onclick = function(){
        // do stuff
    };
    /* or:
    array[i].addEventListener('click',functionToCall);
    */
}

但是，鉴于你正在使用jQuery，我不明白你为什么要为自己复杂化，只需使用：

$('.hide').hide();

除此之外，鉴于您的评论：

因为我必须为每个元素添加事件“click”。

只需使用：

$(elementSelector).click(
    function(){
        // do stuff
    });

假设您要隐藏并将click事件绑定到相同的元素：

$('.hide').hide().click(
    function(){
        // do stuff
    });

Answer 3

从getElementsByClassName获得的不是数组，而是NodeList，因此尝试循环时会出错。

但是，您仍然可以使用以下方法遍历NodeList：

var nodeList = document.getElementsByClassName("hide");
for(var x in nodeList){}

如何隐藏类的所有元素？

3 个答案: