That is very, very helpful, thanks!
I knew I hadn't found the correct way to say "constrain the search to
children of 'this', now I know.
To be honest I think i'm still unclear on the real difference between
the vanilla Javascript 'this' and the jquery '$(this)'. For example I
think that I could have got the selection I wanted with Javascript
like-
this.firstChild.className
...but I also know firstChild doesn't work in IE. I was hoping the
jquery version would help solve that, but at the moment I still have a
solution that works only in Firefox :-} At the moment I don't have
an IE quivalent to Firebug so i'm slightly stuck on how to try to
debug it.
Anyway, in Firefox it works like a charm. Thanks for the help, much
appreciated!
Regards: colin_e
On May 25, 11:44 am, Jason Persampieri <papp...@gmail.com> wrote:
> Certainly... you're really not all that far off at all... let me just
> point out a couple of things.
>
> 1) It's ":first-child", not ":first".
>
> 2) inside the loop, the variable - this - is a reference to the DOM
> <li> node. Hence, to get the jQuery object for that node, use $(this)
> (note the lack of quotes). Although I guess it's possible $("this")
> may 'do the right thing' since there's no HTML Tag named "this".
>
> 3) There is no 3.
>
> 4) a:first-child says find every <a> that happens to be the first-
> child of its parent, *not* find the first child <a> of my current
> context. Is that clear? Here's an example.
>
> <div id='foo'>
> <p><a id='bar'>I am the first-child of 'p'.</a></p>
> <a id='baz'>I am not the first-child and hence will always live in
> the shadow of my older brother, 'p'. Someday he'll pay.</a>
> </div>
>
> $("#foo a:first-child") => ['#bar']
>
> 5) Putting it all together, you still need some way to say, "find
> <a>'s under my current <li>", here you have a few choices...
>
> a) $("a:first-child", this) => find all <a>s that are *any* descendant
> of "this" that also happen to be a "first-child". Note that the
> second parameter passed in to the '$' function is the context to
> search within.
>
> b) $(this).find("a:first-child") => same as a) but I happen to find
> this syntax cleaner.
>
> c) $(this).children("a:first-child") => finds all <a>s that are
> *direct* children of "this" and are also the "first-child". Astute
> members of our audience will note this can only ever correspond to at
> most one <a> per <li>. I think this is the one you are looking for.
>
> Hope this helps!
>
> _jason
>
> On May 24, 1:12 pm, colin_e <colin.ev...@nhs.net> wrote:
>
> > Hi. I'm very new to jquery, and a lightweight coder, so apologies for
> > the newbie question.
>
> > I think I understand the "implied loop" declarative nature of jquery
> > selectors, that say (sort-of) "for everything matching the selector
> > do"{ <some stuff> }
>
> > What i'm struggling to get my head around is how this works inside a
> > function once you HAVE a "this" object?
>
> > Example:
> > I have a list of the form-
>
> > <ul id="map">
> > <li><a class='EM' href='#' title='East Midlands'><span>East
> > Midlands</span></a></li>
> > <li><a class='NE' href="#" title='North East'><span>North East</
> > span></a></li>
> > </ul>
>
> > This inside my document.ready I have a function like this-
>
> > $('#map li').hover(
> > function(){
> > region= $('this a:first').attr('class'); // Tries
> > to find the
> > class of the first <a> in <li>
> > //
> > but always returns undefined??
> > do_something_with_the_region();
> > },
> > function(){
> > undo_something_with_the_region();
> > }
> > );
>
> > The piece that says "region= $('this a:first').attr('class');" is my
> > (clearly incorrect) attempt at the incantation to say "Give the
> > current object (an <il>), return the class attribute of the first
> > anchor that is a child of the current item".
>
> > I suspect I haven't got the right idea at all, can anyone point me in
> > the right direction?
>
> > Regards: colin_e
