jQuery: Tìm phần tử tiếp theo đó không phải là một anh chị em

Question

Hãy nói rằng tôi đã sau HTML:

<span> 
    <span id="x1" class="x">X1</span> 
</span> 
<span> 
    <span> 
     <span id="x2" class="x">X2</span> 
    </span> 
</span> 

Và $(this) là <span id="x1" ...>.

Cách tốt nhất để tìm phần tử tiếp theo phù hợp với .x bằng jQuery là gì?
Cấu trúc của tài liệu thực tế là không thể đoán trước, do đó HTML được cung cấp chỉ là một ví dụ.

Tôi không thể sử dụng nextAll vì nó chỉ tìm thấy anh chị em.
Nếu tôi làm $('.x'), nó sẽ tìm tất cả, nhưng tôi sẽ phải lặp lại/so sánh.
Có giải pháp nào tốt hơn không?

Xem thêm: http://jsfiddle.net/JZ9VW/1/.

Answer 1

Chọn tất cả các yếu tố với lớp x, tính toán các chỉ số của phần tử hiện tại và nhận được các phần tử với chỉ số + 1:

var $x = $('.x'); 
var $next = $x.eq($x.index(this) + 1); 

này hoạt động bởi vì các yếu tố được lựa chọn để tài liệu. Bạn chỉ phải chọn tất cả các thành phần .x một lần khi tải trang (nếu chúng không được tạo động).

Answer 2

Bạn có thể sử dụng xpath:

document.evaluate('following::*[@class="x"], elt, null, XPathResult.ANY_TYPE, null); 

hoặc bạn có thể sử dụng một walker:

var walker = document.createTreeWalker(elt, NodeFilter.SHOW_ELEMENT, function(node) { 
    return node.classList.has('x'); 
}); 

while (walker.nextNode) { 
    do_something_with(walker.currentNode); 
}