javascript hiding divs

Question

Hello.

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/

Answer 2

You can do this easily with jQuery, but your tag doesn't include that so I'm going to show you a vanilla Javascript way:

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

If you are just using regular javascript you can do something like this:

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

With plain JavaScript something like:

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

Then you can do:

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

Reference: getElementById, getElementsByClassName

Update:

Interestingly, IE8 seems to support the more powerful querySelectorAll() function. So if you don't care about < IE8, then you can also do:

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

Unfortunately, there is not the "one" solution to select the elements you want in all browsers. If you don't want to think about cross-browser compatibility, consider to use jQuery as @karim suggests.

Answer 5

If you're looking for a pure javascript implementation, this should work; it will also only hide DIV child nodes.

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

EDIT: changed the style from visibility to display, you probably don't want the layout space lingering.