javascript隐藏div

Question

我想能够有一个javascript函数,为我隐藏div.例如,我有类似的东西

<div id='container'> 
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

并且我希望该函数在说出前3后隐藏每个'item'类元素.我将如何解决这个问题？

谢谢你的帮助

Answer 1

在JS中,你可以做这样的事情,只要项目div是容器div的唯一子项:

var itemDivs = document.getElementById("container").children;
for(var i = 0; i < itemDivs.length; i++) {   
    if(i > 2) {
        itemDivs[i].style.display = 'none';   
    }
}

在这里试试:http://jsfiddle.net/eY9ZD/

否则,你可以这样做:

var divs = document.getElementById("container").getElementsByTagName("div");
for(var i = 0; i < itemDivs.length; i++) {   
    if(i > 2 && divs[i].className == 'item') {
        itemDivs[i].style.display = 'none';   
    }
}

在这里试试:http://jsfiddle.net/6TcWE/

最后,如果jQuery是一个选项,那么使用gt选择器就有一个单行:

$("#container div.item:gt(2)").hide();

在这里试试:http://jsfiddle.net/J8wK6/

Answer 2

使用简单的JavaScript类似于:

function hideElements(elements, start) {
    for(var i = 0, length = elements.length; i < length;i++) {
        if(i >= start) {
            elements[i].style.display = "none";
        }
    }
}

然后你可以这样做:

var elements = document.getElementById('container').getElementsByClassName('item');
hideElements(elements , 3);

参考:getElementById,getElementsByClassName

更新:

有趣的是,IE8似乎支持更强大的querySelectorAll()功能.所以,如果您不关心<IE8,那么您也可以这样做:

var elements = document.querySelectorAll('#container .item');
hideElements(elements , 3);

不幸的是,没有"一个"解决方案可以在所有浏览器中选择所需的元素.如果您不想考虑跨浏览器兼容性,请考虑使用jQuery作为@karim建议.