javascript hiding divs

Question

I want to be able to have a javascript function that hides divs for me. For example, I have something like

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

And i would like the function to hide every 'item' class element after say the first 3. How would i go about this?

Thanks for any help

Answer 1

In JS, you could do something like this, provided the item divs are the only children of the container div:

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

Try it here: http://jsfiddle.net/eY9ZD/

Otherwise, you could do this:

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

Try it here: http://jsfiddle.net/6TcWE/

And finally, if jQuery is an option, there's a one-liner using the gt selector:

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

Try it here: http://jsfiddle.net/J8wK6/