> -------Original Message------- > From: Sam Collett <[EMAIL PROTECTED]> > Subject: Re: [jQuery] How to get the ID of the parent node? > Sent: Feb 21 '07 17:19 > > On 21/02/07, Sam Collett <[EMAIL PROTECTED]> wrote: > > On 21/02/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > > > > > > -------Original Message------- > > > > From: Chris Ovenden <[EMAIL PROTECTED]> > > > > Subject: Re: [jQuery] How to get the ID of the parent node? > > > > Sent: Feb 21 '07 16:04 > > > > > > > > On 2/21/07, SAM COLLETT <[LINK: mailto:[EMAIL PROTECTED] > > > > [EMAIL PROTECTED]> wrote: On 21/02/07, [LINK: > > > > mailto:[EMAIL PROTECTED] [EMAIL PROTECTED] <[LINK: > > > > mailto:[EMAIL PROTECTED] [EMAIL PROTECTED]> wrote: > > > > > Hi, > > > > > > > > > > Following up from a question I asked yesterday, I wanted to get the > > > > closest parent DIV given an arbitrary nested element. But when I > request > > > > the ".id" of that element, i repeatedly get an "undefined" message, > even > > > > though this call, "$(this).parent(" div.sidebarToDo")" yields an > object. > > > > > > > > > > $('#todoList > > > > a.deleteTDItem').each(function(index) { > > > > > var divId = > > > > $(this).parent("div.sidebarToDo").id; > > > > > alert(divId); // alwasy gives > > > > 'undefined' > > > > > $(this).click = function() { $('#' + > > > > divId).remove(); }; > > > > > }); > > > > > > > > > > This is the HTML in question: > > > > > > > > > > <div class="sidebarToDo" width="100%" id="dToDo3"> > > > > > <table cellpadding="0" cellspacing="0" border="0" width="100%"> > > > > > <tr> > > > > > <td><input id="cbTdId3" onClick="var textDecor = > (this.checked ? > > > > 'line-through' : 'none'); > > > > $('#textId3').css('text-decoration', textDecor);" > > > > type="checkbox" id="tdcb3" ></td> > > > > > > > > > > <td id="textId3" class="sidebarText" style="text-decoration: > > > > none">Start Work</td> > > > > > <td align="right"><a class="editTDItem" href='#'><img > > > > src="images/edit.gif" alt="Edit" border="0"></a></td> > > > > > <td align="right"><a class="deleteTDItem" > > > > href="javascript:toggleDiv('dToDo3');"><img > > > > src="images/deleteLink.gif" alt="Delete" border="0"></a></td> > > > > > </tr> > > > > > </table> > > > > > </div> > > > > > > > > > > Thanks, - Dave > > > > > > > > You can get the id via attr: > > > > > > > > $(this).parent("div.sidebarToDo").attr("id") > > > > > > > > > > > > To spell it out a little more clearly, the API for attributes has > changed > > > > in jQuery 1.0.3+ and shortcuts like .id() no longer work > > > > > > > > -- > > > > Chris Ovenden > > > > > > > > [LINK: http://thepeer.blogspot.com] http://thepeer.blogspot.com > > > > "Imagine all the people / Sharing all the world" > > > > > > Thanks, but I'm still getting "undefined" even though I can an object > for my reference to the DIV. Any ideas on how to troubleshoot? here's the > JS: > > > > > > $('#todoList a.deleteTDItem').each(function(index) { > > > var divId = > $(this).parent("div.sidebarToDo").attr("id"); > > > alert($(this).parent("div.sidebarToDo") + " id:" > + divId); > > > $(this).click = function() { $('#' + > divId).remove(); }; > > > }); > > > > > > > I would have thought that would have worked.. you could always try: > > $(this).parent("div.sidebarToDo")[0].id > > > > I think I have an idea of what you are trying to do - hide the todo > > item when delete is clicked, and put a line through the task if the > > checkbox is checked (i.e. task completed). In that case, the HTML can > > be tidied up a bit (I've removed the id's to improve readability, and > > also noticed that you had two defined on the checkbox): > > > > > > <div class="sidebarToDo" width="100%" id="dToDo3"> > > <table cellpadding="0" cellspacing="0" border="0" width="100%"> > > <tr> > > <td><input type="checkbox" name="completed"></td> > > <td class="sidebarText">Start Work</td> > > <td align="right"><a class="editTDItem" href='#'><img > > src="images/edit.gif" alt="Edit" border="0"></a></td> > > <td align="right"><a class="deleteTDItem" href='#'><img > > src="images/deleteLink.gif" alt="Delete" border="0"></a></td> > > </tr> > > </table> > > </div> > > > > And the following JavaScript used: > > > > $('#todoList a.deleteTDItem').click( function() { > > alert("clicked"); > > $(this).parent("div.sidebarToDo").remove(); > > return false; > > }); > > That should be: > > $('#todoList a.deleteTDItem').click( function() { > $(this).parents("div.sidebarToDo").remove(); > return false; > }); > > > $('#todoList :checkbox').click( function() { > > var textDecor = (this.checked ? 'line-through' : 'none'); > > $(this).parent().find("td.sidebarText").css('text-decoration', > textDecor); > > }); > > >
You guessed correctly on the bigger picture of what I'm trying to do. Thanks to all for their responses. The "s" thing solved the biggest hurdle I was trying to get over. - Dave _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
