javascript hiding 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:

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

Попробуйте он Re: 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); 

К сожалению, это не «один» решения, чтобы выбрать элементы, которые вы хотите во всех браузерах. Если вы не хотите думать о совместимости между браузерами, подумайте о том, чтобы использовать jQuery, как предлагает @karim.

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

EDIT: изменил стиль от видимости до отображения, вы, вероятно, не хотите, чтобы пространство макета затянулось.