The statement "it has a parent div.popup somewhere up the tree (no
idea how many levels)" implies to me that div.popup may not be the
direct parent of "Cancel". Parent() returns the unique parent, so
there will be only one for each element; in the above case $
(this).parent() will return the unique parent element of "this". If
"this" is a child (not a descendant) of div.popup, it will be returned
without having to pass any expression to the selector. If it's not a
child but a descendant (and the quoted statement indicates that could
be the case), then passing the div.popup expression will filter out
the parent and return an empty object.
.parents() traverses up the tree, through all parents, and then :first
returns the first matching element for the expression div.popup
Consider this markup:
<div id="one" class="popup">
<div id="two" class="popup">
<div id="three" class="popup">
<div id="four" class="notpopup">
<a id="cancel">test</a>
</div>
</div>
</div>
</div>
Calling $('#cancel').parent() would return [div#four.notpopup] as
that is the unique parent for the link. Adding the expression
div.popup will filter out that parent as it won't match (and
adding :first on top of that will obviously have no effect as a non-
match has already occurred). The :first selector implies having more
than one match, which is what you get with .parents()
If you try on the above markup you'll get [div#three.popup,
div#two.popup, div#one.popup] as we traverse up the tree.
Using :first then filters those matches to the first match, so $
('#cancel').parents('div.popup:first') returns [div#three.popup],
which is the first parent div with a class of popup.
On Feb 28, 9:33 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> Hmmm...after looking at the docs, it would seem
> "parent" would be more appropriate since Kim is
> looking for the first parent of the link '#cancel'.
>
> Why would you think it should be "parents" which
> would return more than the first parent.
>
> Am I misunderstanding something?
>
> Rick
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of Rick Faircloth
> Sent: Sunday, March 01, 2009 12:26 AM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: How to find a parent
>
> Thanks for the tip!
>
> Rick
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of mkmanning
> Sent: Sunday, March 01, 2009 12:18 AM
> To: jQuery (English)
> Subject: [jQuery] Re: How to find a parent
>
> It should be .parents
>
> $(this).parents('div.popup:first')
>
> On Feb 28, 9:05 pm, "Rick Faircloth" <r...@whitestonemedia.com> wrote:
> > Assuming that the cancel link has an id of 'cancel':
>
> > How about:
>
> > $(document).ready(function() {
>
> > $('#cancel').click(function() {
> > $(this).parent('div.popup:first')
> > });
>
> > });
>
> > Not sure what you want to do with the parent div when you locate it...
>
> > untested, buy may work...
>
> > hth,
>
> > Rick
>
> > -----Original Message-----
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com]
> > On
>
> > Behalf Of riotbrrd
> > Sent: Saturday, February 28, 2009 11:47 PM
> > To: jQuery (English)
> > Subject: [jQuery] How to find a parent
>
> > I have a bunch of Divs with class ".popup". Each div is different in
> > what it contains; some are simple, some are pretty complex, containing
> > tables, other divs, etc..
>
> > If I have a link, for example,"Cancel", within that Div, and the only
> > thing that I know about Cancel is that 1) it has a parent div.popup
> > somewhere up the tree (no idea how many levels), and 2) if I go
> > backwards up the tree from Cancel, the first div.popup I encounter
> > will be the right one, how can I go about finding the right parent
> > div.popup? I'd like to just attach a handler that starts with "this"
> > (meaning the Cancel link) and finds the correct div.popup up the tree.
>
> > Hope this is question is clear. Thanks!
> > -Kim
