[jQuery] Re: next / siblings issue

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 -