jQuery: Grab the next <select> with a specific class in a table row

Question

Hi all.

I have this HTML structure (excerpt):

<td>
    <select id="test1" class="pub_chooser">
        <option value="99">All Publications</option>
        <option value="40">Contract</option>
        <option value="21">Student</option>
    </select>
</td>

<td>
    <select id="thing1" class="ev_chooser"></select>
</td>

This is hooked up to an AJAX function to populate the second <select> when an option is clicked.

I'm also allowing users to clone() the table row. I now need to target the second <select> in my AJAX function.

How can I reliably get the next .ev_chooser <select> element when the pub_chooser <select> is clicked?

I've tried this to no avail:

corresponding_select = $('select .ev_chooser').nextAll();

Any tips?

-Matt

Answer 1

Get rid of the space in the selector:

$('select.ev_chooser')

If you have space between select and the class, it searches all children of select for any element with class "ev_chooser".

Answer 2

This will give you the last select.

$('select.ev_chooser:last')

Or just search within the cloned element:

var clonedOBJECT = $(whatEverYouClone).clone();
var theSelect= $( 'select.ev_chooser', clonedOBJECT );

Answer 3

corresponding_select = $('pub_chooser').closest('td').siblings().children('.ev_chooser');