javascript ukrywające divy

Question

Chcę móc mieć funkcję javascript, która ukrywa dla mnie divy. Na przykład, mam coś takiego

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

i chciałbym funkcję do ukrycia wszelkich „pozycja” elementu klasy po pierwsze powiedzieć 3. Jak pójdę na ten temat?

Dzięki za wszelką pomoc

Answer 1

W JS, można zrobić coś takiego, pod warunkiem, że DIV pozycji są jedynymi dziećmi div kontenera:

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

Wypróbuj go tutaj: http://jsfiddle.net/eY9ZD/

W przeciwnym razie, można to zrobić:

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

Wypróbuj go on re: http://jsfiddle.net/6TcWE/

I wreszcie, jeśli jQuery jest opcją, jest to jedno-liner pomocą wybieraka gt:

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

Wypróbuj go tutaj:

Answer 2

Można to zrobić łatwo z jQuery, ale twój tag nie obejmuje tego, więc pokażę ci waniliowy kod 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

Jeśli używasz zwykłego javascript można zrobić coś takiego:

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

zwykły coś JavaScript, takich jak:

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

Następnie można zrobić:

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

referencyjny: getElementById, getElementsByClassName

Aktualizacja:

Co ciekawe, IE8 wydaje się wspierać bardziej wydajną funkcję querySelectorAll(). Więc jeśli nie dbają o < IE8, można również zrobić:

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

Niestety, nie jest „jeden” rozwiązanie, aby wybrać elementy, które mają we wszystkich przeglądarkach. Jeśli nie chcesz myśleć o kompatybilności z różnymi przeglądarkami, rozważ użycie jQuery jako sugestii @karim.

Answer 5

Jeśli szukasz czystej implementacji javascript, to powinno działać; będzie również ukrywać tylko węzły potomne 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: zmienił styl z widocznością do wyświetlania, to prawdopodobnie nie chcesz przewlekły kosmiczny układ.