re: this vs $(this) - this = DOMNode $(this) = [DOMNode] (ie, an array containing the single element, DOMNode) that also happens to have lots of nifty methods like 'children', 'find' and 'animate'.
The jQuery version should work in pretty much all browsers though... the compatibility layer is built-in. Oh, and if you aren't, use IE8 for IE debugging. It's nowhere near as nice as FF+Firebug, but it's a lot better than IE7. Also, http://api.jquery.com is a very handy reference tool :) _jason PS. Another couple of ways to get what you want - /* get all direct children of this that are <a>'s, then filter out all remaning, but leave first children */ $(this).children('a').filter(":first-child") /* get all direct children of this, grab just the first one, then filter out all remaining, but leave <a>'s */ $(this).children().eq(0).filter("a") On May 25, 5:44 am, colin_e <colin.ev...@nhs.net> wrote: > 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
