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
