I hate to say this but i'm using IE6 for compatibility testing because that (like it or not) is still our organisation's standard browser... :-}
On May 25, 2:03 pm, Jason Persampieri <papp...@gmail.com> wrote: > 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.comis 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
