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);
> });
>

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to