Question

I’m working with a jquery plugin that requires me to identify certain buttons with a string it uses as a selector but it doesn’t allow me to provide the selector’s context or use traversing functions.

If I have:

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

At the time I need to provide the selector all I know is the id of the dialog (in this case, “#dialog”).

This selector correctly selects the “next” button:

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

Can that selector be rewritten without the context argument? I tried this but it doesn’t return any elements:

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

I’m assuming that is looking for buttons that are siblings instead of buttons within siblings which is why it’s failing.

Answer 1

Add a class to your buttons and use that in the selector. For example, change your markup to:

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

Then this selector should work:

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

~ would work too, but + is more specific. (edit, not acutally right after the div like in the example)

I think the problem is that the button does not contain next, it contains <span>next</span>. Using :contains('<span>next</next>') instead of .next seems to select the span, not the button.