javascript隐藏div

我希望能够有一个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”类元素。我该怎么办

---

感谢您在JS中提供的帮助，如果item div是container div的唯一子项，您可以这样做：

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

---

在这里尝试一下：

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

var divs=document.getElementById（'container'）.getElementsByTagName（'div'）；
var numItemDivs=0；
对于（变量i=0；变量i=2）{
divs[i].style.display=“无”；
}
}
}

如果您只使用常规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";
}

var container=document.getElementById（“容器”）；
var items=container.childNodes；
对于（变量i=0；i=3）
项目[i].style.display=“无”；
}

使用普通JavaScript，例如：

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

参考文献：

更新：

有趣的是，IE8似乎支持更强大的

querySelectorAll（）

函数。因此，如果您不关心

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

---

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

< P>如果您正在寻找纯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";
        }
    }
}

函数hideMe（）{
var item_list=document.getElementById（“容器”）.children；
对于（变量i=0；i2&&item\u list[i]。标记名==“DIV”）{
项目列表[i].style.display=“无”；
}
}
}

---

编辑：将样式从“可见性”更改为“显示”，您可能不希望布局空间停留。

不要忘记，使用此方法需要jQuery库。请注意，

childNodes

将返回每个子节点，也返回文本节点。不幸的是，IE8之前（包括IE8）的IE不支持getElementsByClassName:@Robusto:哦，我不知道。那么这取决于HTML，也许

子类
就足够了。
var elements = document.getElementById('container').getElementsByClassName('item');
hideElements(elements , 3);

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

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