Question

I’m having difficulty targeting a nested span injected by JQM above a select group.

In the code below, I lack the tools/code/knowledge to target the span in the second select block “How many?”

As JQM is generating the span info, I can’t add a class or ID to help me.

I had hoped that $('#wsize').prevAll('span.ui-btn-text:first').html() would have done the trick, but I got that wrong. $('#wsize').prev('.ui-btn-inner span').html() was also unsuccessful.

Directions gratefully welcomed.

fieldset class="..." data-role="controlgroup" data-type="horizontal">
<div class="ui-select"><div class="...">
<span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Plug trays</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span></span>
<select name="pot" id="pot">
<option id="potnot" value="not" selected="selected">Container type</option>
<option value="aza">Azalea pots</option>
...
</select></div></div>

<div class="ui-select"><div ...>
<span class="ui-btn-inner">
    <span class="ui-btn-text">Which size?</span>
    <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
</span>
<select name="size" id="size">
<option id="wsize">Which size?</option>
...
</select>
</div></div>

<div class="ui-select"><div ...>
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
   <span class="ui-btn-text">How many?</span>
   <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
</span>
<select name="quantity" id="quantity">
   <option id="howmany">How many?</option>
   ... 
</select></div></div>
</fieldset>

Answer 1

I not sure what you are looking for a span value but plz see demo here:

http://jsfiddle.net/7hSSR/ or http://jsfiddle.net/7hSSR/1/

Hope this helps for cause :)

code

alert($('#wsize').parents('div').next('div').find('.ui-btn-text').html());