[jQuery] Re: next / siblings issue

Urgh. Thanks very much for your help, I've found the issue.

I didn't think of changing my testing methodology; it would seem that
a number of things I'd tried would have worked. The confusion (and I
clear this up only for the other people who read this who have the
same problem as me) was that I was of the understanding that a jQuery $
('#...') object was the same as a javascript document.getElementById
(''...') object. It's not, and there's no id property in jQuery,
hence:

var x = document.getElementById
('ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID');
alert(x.id); // Returns
'ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID'

var y = $('#ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID');
alert(y.id); // Returns 'undefined'

It would seem that the code I needed was:

alert($(this).nextAll('select').attr('id'));

Thanks again for your help, I owe you a beer.

On 29 Mar, 21:11, mkmanning <michaell...@gmail.com> wrote:
> Given this html:
>
> <table class="form">
>    <tr>
>       <td class="label" width="200">Category*</td>
>       <td>
>          <select name="ctl00$cphMain$repSkills
> $ctl00$ddlSkillCategory_ID"
> id="ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID"
> class="SkillCategory">
>         <option value="-1">Skill or Service</option>
>         <option value="150">--Other</option>
>       </select>
>       <span id="ctl00_cphMain_repSkills_ctl00_spanSkillError"
> style="display:none;"></span>
>       <br />
>       <select name="ctl00$cphMain$repSkills
> $ctl00$ddlSkillSubCategory_ID"
> id="ctl00_cphMain_repSkills_ctl00_ddlSkillSubCategory_ID"
> style="display:none;">
>       </select>
>       <span id="ctl00_cphMain_repSkills_ctl00_spanSubSkillError"
> style="display:none;"></span>
>    </td>
> </tr>
> </table>
>
> This JavaScript will cause the second select to show when the first
> one is changed:
> $(document).ready(function(){
>         $('#ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID').change
> (function(){
>                 $(this).nextAll('select').show();
>         });
>
> });
>
> Hope that gets you further along :)
>
> On Mar 29, 12:58 pm, Dunc <duncan.we...@gmail.com> wrote:
>
>
>
> > Nope, it would seem I'm failing jQuery101.
>
> > I've tried:
>
> > var ddlSource = this.id;  // this works perfectly
> > alert(ddlSource);
>
> > var ddlTarget = $(this).nextAll('select');
> > alert('target1: ' + ddlTarget.id);
>
> > ddlTarget = $(ddlSource).nextAll('select');
> > alert('target2: ' + ddlTarget.id);
>
> > ddlTarget = $("#" + ddlSource.id).nextAll('select');
> > alert('target3: ' + ddlTarget.id);
>
> > ...all come up undefined.  I've  put the ID onto the previous line,
> > and just displayed the final value - same result.  I've read the
> > jQuery docs (http://docs.jquery.com/Traversing/nextAll) and a bunch of
> > other stuff, all which hint at what I'm doing being correct.  I'm also
> > aware that id is part of javascript as opposed to raw jQuery so I've
> > tried to filter 'em out.
>
> > Any other hints?
>
> > On 29 Mar, 15:28, mkmanning <michaell...@gmail.com> wrote:
>
> > > Adding the expr just filters the matched elements further. Try .nextAll
> > > ('select').
>
> > > On Mar 29, 2:42 am, Dunc <duncan.we...@gmail.com> wrote:
>
> > > > I'm building cascading selects, but because they could come from
> > > > mulitple locations within the HTML, I need to capture the ID of the
> > > > parent select (easy enough) and the child select.
>
> > > > This correctly displays the parent select:
> > > > var ddlSource = this.id;
> > > > alert(ddlSource);
>
> > > > This enumerates all siblings, including the child select:
> > > > var x = $("#" + this.id).siblings();
> > > > alert (x.length);
> > > > for (var i = 0; i < x.length; i++) {
> > > >    alert(x[i].id);
>
> > > > }
>
> > > > However, I cannot manage to display the next select within the same
> > > > <td> using the next(expr) statement.  My code has changed a thousand
> > > > times, but currently looks like:
>
> > > > Doesn't work:
> > > > var ddlTarget = $("#" + ddlSource.id).next('select');
> > > > alert(ddlTarget.id);
>
> > > > The HTML is really simple:
> > > > <table class="form">
> > > >    <tr>
> > > >       <td class="label" width="200">Category*</td>
> > > >       <td>
> > > >          <select name="ctl00$cphMain$repSkills
> > > > $ctl00$ddlSkillCategory_ID"
> > > > id="ctl00_cphMain_repSkills_ctl00_ddlSkillCategory_ID"
> > > > class="SkillCategory">
> > > >         <option value="-1">Skill or Service</option>
> > > >         <option value="150">--Other</option>
> > > >       </select>
> > > >       <span id="ctl00_cphMain_repSkills_ctl00_spanSkillError"
> > > > style="display:none;"></span>
> > > >       <br />
> > > >       <select name="ctl00$cphMain$repSkills
> > > > $ctl00$ddlSkillSubCategory_ID"
> > > > id="ctl00_cphMain_repSkills_ctl00_ddlSkillSubCategory_ID"
> > > > style="display:none;">
> > > >       </select>
> > > >       <span id="ctl00_cphMain_repSkills_ctl00_spanSubSkillError"
> > > > style="display:none;"></span>
> > > >    </td>
> > > > </tr>
> > > > </table>
>
> > > > Why does the siblings()[4] return my child dropdown, whereas next
> > > > ('select') doesn't?  I'm aware that next only gets the very next item,
> > > > but according to the docs adding an expression should make it jump to
> > > > the next sibling of that type.
>
> > > > Note, I've also tried logic down the route of:
> > > > alert($(this).siblings('~ select').id);
> > > > ...but with no luck
>
> > > > I'm sure this is just me missing something really simple, but can
> > > > someone please steer me down the right path?- Hide quoted text -
>
> > > - Show quoted text -- Hide quoted text -
>
> - Show quoted text -