Ẩn anh chị em tiếp theo của một phần tử với Javascript

Question

Tôi có một phần tử được lấy từ document.getElementById('the_id'). Làm thế nào tôi có thể có được anh chị em tiếp theo của mình và giấu nó? Tôi đã thử cách này nhưng không hoạt động:

elem.nextSibling.style.display = 'none'; 

Lỗi Firebug là elem.nextSibling.style is undefined.

Answer 1

vì Firefox xem xét khoảng trắng giữa các nút phần tử thành nút văn bản (trong khi IE không) và do đó sử dụng .nextSibling trên một phần tử nhận nút văn bản đó trong Firefox.

Sẽ hữu ích khi có chức năng sử dụng để nhận nút phần tử tiếp theo. Một cái gì đó như thế này

/* 
    Credit to John Resig for this function 
    taken from Pro JavaScript techniques 
*/ 
function next(elem) { 
    do { 
     elem = elem.nextSibling; 
    } while (elem && elem.nodeType !== 1); 
    return elem;   
} 

sau đó bạn có thể làm

var elem = document.getElementById('the_id'); 
var nextElem = next(elem); 

if (nextElem) 
    nextElem.style.display = 'none'; 

Answer 2

lỗi Firebug là elem.nextSibling.style là undefined.

vì nextSibling có thể là một văn bản nút hoặc loại nút khác

do { 
    elem = elem.nextSibling; 
} while(element && elem.nodeType !== 1); // 1 == Node.ELEMENT_NODE 
if(elem) elem.style.display = 'none'; 

Answer 3

Hãy thử Looping qua trẻ em của nguyên tố này bằng một cái gì đó như:

var i=0; 
(foreach child in elem) 
{ 
    if (i==0) 
    { 
    document.getElementByID(child.id).style.display='none'; 
    } 
} 

Hãy điều chỉnh phù hợp với cú pháp.

Answer 4

Hãy xem Element Traversal API, API đó chỉ di chuyển giữa các nút Phần tử. Điều này cho phép như sau:

elem.nextElementSibling.style.display = 'none'; 

Và do đó tránh được vấn đề cố hữu trong nextSibling của khả năng nhận được các nút phi tử (ví dụ TextNode khoảng trắng giữ)