javascript ẩn số div

Question

Tôi muốn có thể có một chức năng javascript ẩn divs cho tôi. Ví dụ: tôi có một số thông tin như

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

Và tôi muốn chức năng ẩn mọi thành phần lớp 'item' sau khi nói câu đầu tiên 3. Làm cách nào để tôi thực hiện việc này?

Nhờ sự giúp đỡ

Answer 1

Trong JS, bạn có thể làm một cái gì đó như thế này, với điều kiện các divs mục là con cái duy nhất của div container:

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

Hãy thử nó ở đây: http://jsfiddle.net/eY9ZD/

Nếu không, bạn có thể thực hiện việc này:

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

Hãy dùng thử lại: http://jsfiddle.net/6TcWE/

Và cuối cùng, nếu jQuery là một lựa chọn, có một lớp lót bằng cách sử dụng gt selector:

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

Hãy thử nó ở đây:

Answer 2

Bạn có thể làm điều này một cách dễ dàng với jQuery, nhưng thẻ của bạn không bao gồm điều đó vì vậy tôi sẽ cho bạn thấy một cách vanilla 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

Nếu bạn chỉ sử dụng thường xuyên javascript bạn có thể làm một cái gì đó như thế này:

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

Với một cái gì đó Javascript đơn giản như:

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

Sau đó, bạn có thể làm:

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

tham khảo: getElementById, getElementsByClassName

Cập nhật:

Điều thú vị là IE8 dường như hỗ trợ chức năng querySelectorAll() mạnh mẽ hơn. Vì vậy, nếu bạn không quan tâm đến < IE8, sau đó bạn cũng có thể làm:

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

Thật không may, không phải là "một" giải pháp để lựa chọn các yếu tố mà bạn muốn trong tất cả các trình duyệt. Nếu bạn không muốn nghĩ về khả năng tương thích giữa các trình duyệt, hãy xem xét sử dụng jQuery như @karim gợi ý.

Answer 5

Nếu bạn đang tìm kiếm một triển khai javascript thuần túy, điều này sẽ hoạt động; nó cũng sẽ chỉ ẩn các nút con 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"; 
     } 
    } 
} 

CHỈNH SỬA: thay đổi kiểu hiển thị thành hiển thị, có thể bạn không muốn không gian bố cục kéo dài.