JQuery: найдите следующий элемент, который не является родным братом

Скажем, у меня есть следующий HTML:

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

И $(this) - это <span id="x1" ...>.

Каков наилучший способ найти следующий элемент, соответствующий .x с помощью jQuery?
Структура фактического документа непредсказуема, поэтому предоставленный HTML является лишь примером.

Я не могу использовать nextAll, поскольку он находит только братьев и сестер.
Если я сделаю $('.x'), он найдет все, но мне придется перебирать/сравнивать.
Есть ли лучшее решение?

Смотрите также: http://jsfiddle.net/JZ9VW/1/.

Ответ 1

Выберите все элементы с классом x, вычислите индекс текущего элемента и получите элемент с индексом + 1:

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

Это работает, потому что элементы выбраны в порядке документа. Вам нужно только выбрать все элементы .x один раз при загрузке страницы (если они не создаются динамически).

Ответ 2

Вы можете использовать xpath:

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

или вы можете использовать ходунка:

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

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