jquery selector: ID starts with something (keyword "section")

Question

I want to target all divs that have an id that begins with "section"; for each of these divs, I want to show child divs of type input that begin with "pre".

    //groups = $('div [id^=section]');  
    groups = $('[id^=section]');    

    $.each(groups, function(key, group) {
         alert(key + ': ' + group); 
        //inputs = group.('[id^=pre]'); 
    });


<div id="section-A1">       
    <input id="preBeginDtl" name="BeginDtlFields" value="" type="hidden">
    <input id="other" name="name2" value="" type="input">
    <input id="preGroup" name="GRP" value="AA" type="hidden">
</div>

Answer 1

This would work as the selector:

$('[id^=section] > [id^=pre]')

But, I don't think you can change the type attribute for input elements. You would probably just want to set the 'pre' inputs as type="text" (instead of type="hidden"), and set their css display property to none. Then use the jQuery show() to unhide it.

<div id="section-A1">       
    <input id="preBeginDtl" name="BeginDtlFields" value="" type="text" style="display:none">
    <input id="other" name="name2" value="" type="text">
    <input id="preGroup" name="GRP" value="AA" type="text" style="display:none">
</div>

and

$('[id^=section] > [id^=pre]').show()

Answer 2

Rather than look for a partial id, perhaps you should add classes "section" and "pre" to the divs? Then you can search on

groups = $('div.section div.pre');

What you are doing is essentially a class-based lookup, and that would be the appropriate mechanism.