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"; 
     } 
    } 
} 

編輯：改變風格從可見性到顯示，你可能不希望佈局空間揮之不去。