JQuery селектор для дочернего элемента брата без предоставления контекста или использования функций обхода

Question

Я работаю с плагином jquery, который требует от меня идентифицировать определенные кнопки с помощью строки, которую он использует в качестве селектора, но не позволяет мне предоставлять контекст селектора или использовать функции обхода.

ЕслиУ меня есть:

<div>
    <div id="dialog"></div>
    <div>
        <button><span>back</span></button>
        <button><span>next</span></button>
    </div>
</div>

В то время, когда мне нужно предоставить селектор, все, что я знаю, это идентификатор диалога (в данном случае, "#dialog").

Этот селектор правильно выбирает кнопку «Далее»:

$("button:contains('next')", "#dialog ~ div")

Может ли этот селектор быть переписан без аргумента контекста?Я пробовал это, но он не возвращает никаких элементов:

$("#dialog ~ div button:contains('next')")

Я предполагаю, что ищет кнопки, которые являются братьями и сестрами, а не кнопки внутри братьев и сестер, поэтому он не работает.

Answer 1

Добавьте класс к своим кнопкам и используйте его в селекторе.Например, измените разметку на:

<div>
    <div id="dialog"></div>
    <div>
        <button class='back'><span>back</span></button>
        <button class='next'><span>next</span></button>
    </div>
</div>

Тогда этот селектор должен работать:

$("#dialog ~ div button.next")

~ тоже будет работать, но + более конкретно. (редактировать, не сразу после div, как в примере)

Мне кажется, проблема в том, что кнопка не содержит next, она содержит <span>next</span>.Использование :contains('<span>next</next>') вместо .next позволяет выбрать span, а не button.

Answer 2

Оказывается, это ошибка в движке селектора Sizzle, используемом jQuery.Я создал тикет 9939 для него и отправил патч для его исправления.

Answer 3

Вы можете использовать это?http://jsfiddle.net/Wd4zF/

$('#dialog').next().children('button span:last');

Answer 4

единственный другой способ, которым я знаю, это

$("#dialog").find("button:contains('next')")