JavaScript ocultando divs

Question

Quiero ser capaz de tener una función de JavaScript que oculta divs para mí. Por ejemplo, tengo algo así como

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

y me gustaría que la función de ocultar todos los elementos de clase 'elemento' después de decir que la primera 3. ¿Cómo hago para esto?

Gracias por cualquier ayuda

Answer 1

En JS, que podría hacer algo como esto, siempre y cuando los divs de artículos son los únicos hijos del contenedor div:

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

Inténtelo aquí: http://jsfiddle.net/eY9ZD/

De lo contrario, usted puede hacer esto:

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

Pruébalo él re: http://jsfiddle.net/6TcWE/

Y finalmente, si jQuery es una opción, hay una sola línea utilizando el gt selector:

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

probar aquí:

Answer 2

Usted puede hacer esto fácilmente con jQuery, pero su etiqueta no incluye eso, así que voy a mostrarle un modo vainilla de 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

Si solo está usando una versión normal javascript que puede hacer algo como esto:

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

Con llanura JavaScript algo como:

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

A continuación, puede hacer:

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

Referencia: getElementById, getElementsByClassName

Actualización:

Curiosamente, IE8 parece ser compatible con la función más poderosa querySelectorAll(). Así que si no se preocupan por < IE8, entonces también puede hacer:

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

Por desgracia, no es la solución "uno" para seleccionar los elementos que desee en todos los navegadores. Si no desea pensar en la compatibilidad entre navegadores, considere usar jQuery como sugiere @karim.

Answer 5

Si está buscando una implementación pura de javascript, debería funcionar; también solo ocultará los nodos secundarios 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"; 
     } 
    } 
} 

EDIT: cambió el estilo de visibilidad a visualización, es probable que no desee que el espacio de diseño permanezca.