Tính di động của nextElementSibling/nextSibling

Question

Tôi hiện đang viết một accordion và chạy vào cùng một vấn đề như mô tả trong nextSibling difference between IE and FF? - đặc biệt là sự khác biệt giữa nextSibling/nextElementSibling của Microsoft và được thực hiện bởi mọi người khác.

Vì nhiều lý do khác nhau, việc sử dụng jquery không phải là một tùy chọn. Cũng không phải là nhận được tất cả người dùng MS của tôi để nâng cấp lên MSIE9

Hiện nay tôi đang sử dụng đoạn mã sau để làm việc xung quanh vấn đề này:

// tr is a TR doc element at entry.... 
while (nthRow--) { 
    // for Chrome, FF tr=tr.nextElementSibling; for MSIE...tr=tr.nextSibling; 
    tr=tr.nextElementSibling ? tr.nextElementSibling : tr=tr.nextSibling; 
    if (!tr || tr.nodeName != "TR") { 
      break; 
    } 
    tr.style.display=""; 
} 

Mà dường như để làm những gì tôi mong đợi trong MSIE6, FF và Chrome - tức là các phần tử NnthRow TR bên dưới TR ban đầu được hiển thị (trước đây là style.display = "none").

Nhưng điều này có khả năng có tác dụng phụ không mong muốn không?

(Tôi là một chút của một newbie với Javascript;)

Answer 1

nextSibling sẽ thấy ý kiến ​​HTML, vì vậy hãy chắc chắn để giữ chúng ra.

Khác với bạn nên không sao vì bạn sẽ không có bất kỳ nút văn bản nào giữa các phần tử tr của mình.

Vấn đề duy nhất khác mà tôi có thể nghĩ đến là ở số Firefox 3 trong đó nextElementSibling chưa được triển khai. Vì vậy, nếu bạn đang hỗ trợ trình duyệt đó, bạn sẽ cần phải mô phỏng theo cách thủ công nextElementSibling. (Đẹp, chắc chắn họ đã có nó được thực hiện trong FF3.5 mặc dù.)

Bạn sẽ được an toàn hơn để tạo một hàm nextElementSibling():

tr = tr.nextElementSibling || nextElementSibling(tr); 

function nextElementSibling(el) { 
    do { el = el.nextSibling } while (el && el.nodeType !== 1); 
    return el; 
} 

Answer 2

Firefox nextSibling trả về khoảng trắng \ n trong khi Internet Explorer thì không.

Trước nextElementSibling đã được giới thiệu, chúng tôi phải làm một cái gì đó như thế này:

var element2 = document.getElementById("xxx").nextSibling; 
while (element2.nodeType !=1) 
{ 
      element2 = element2.nextSibling; 
} 

Answer 3

Xét câu trả lời trước, tôi hiện đang thực hiện nó theo cách này để cấp tính tương thích giữa các trình duyệt:

function nextElementSibling(el) { 
    if (el.nextElementSibling) return el.nextElementSibling; 
    do { el = el.nextSibling } while (el && el.nodeType !== 1); 
    return el; 
} 

Bằng cách này, tôi có thể tránh vòng lặp do/while cho các trình duyệt hỗ trợ nextElementSibling. Có lẽ tôi quá sợ hãi của vòng lặp while trong JS :)

Một ưu điểm của giải pháp này là recursability:

//this will always works: 
var e = nextElementSibling(nextElementSibling(this)); 

//this will crash on IE, as looking for a property of an undefined obj: 
var e = this.nextElementSibling.nextElementSibling || nextElementSibling(nextElementSibling(this));