javascript隐藏divs

Question

我想能够有一个javascript函数，为我隐藏divs。例如，我有一些像

<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后，我将如何去吗？

感谢所有帮助

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(); 

这里试试：

Answer 2

您可以用jQuery做到这一点很容易，但你的标签不包括，所以我要告诉你一个香草的Javascript方式：

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

Answer 3

如果你只是使用常规JavaScript的你可以做这样的事情：

var container = document.getElementById("container"); 
var items = container.childNodes; 
for(var i = 0; i < items.length; i++){ 
    if(i >= 3) 
     items[i].style.display = "none"; 
} 

Answer 4

用普通的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); 

不幸的是，不是“一个”解决方案，选择在所有的浏览器需要的元素。如果你不想考虑跨浏览器的兼容性，可以考虑使用@karim建议的jQuery。

Answer 5

如果你正在寻找一个纯粹的JavaScript实现，这应该工作;它也只会隐藏DIV子节点。

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

编辑：改变风格从可见性到显示，你可能不希望布局空间挥之不去。