jQuery $.parents() not Functioning Properly

Question

I have a following code in my html file and i want to access the grand parent of an element like the table which is the grand parent of td in the following code. For this I used the following jquery syntax but it displays "undefined". can any one guide me where the problem is ?

  <script type="text/javascript">

   $(document).ready(function () {
     alert($('td[id="4"]').parents().eq(1).attr("id"));
  });

</script> 

<title></title>
</head>
<body>
<form id="form1" runat="server">
  <div  class="ui-layout-center" id="center" runat="server">
     <table id="Table1" >             
        <tr id="tr1">
            <td id="3" class="cell" >
               first cell 
            </td>
            <td id="4" class="cell">
            second cell
            </td>
        </tr> 
     </table>
    <br />
    <br />
  </div>
</form>
</body>
</html>

It's not `undefined` for me: http://jsfiddle.net/tt3wC/ Maybe your actual HTML/code is different. Oh and yes, you have to execute the code after the DOM was loaded, which you would know [if you read the tutorial](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery): *"As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready."* — Felix Kling, Apr 13 '12 at 15:15
possible duplicate of [jQuery select ancestor](http://stackoverflow.com/questions/2200775/jquery-select-ancestor) — Felix Kling, Apr 13 '12 at 15:16
Does your actual code have ready handlers around it? `$(function() { ... });` — Rory McCrossan, Apr 13 '12 at 15:16
Not in your example, they're not. If you're not showing us the code you're actually using we can't help you very well. — ceejayoz, Apr 13 '12 at 15:19
i edited the code ...and this is the actual code. it simply doesnot getting the id of the table — zeeshan, Apr 13 '12 at 15:24
Not getting the ID of the table is different from getting `undefined`. — Felix Kling, Apr 13 '12 at 16:59

jfriend00 · Accepted Answer · 2012-04-13T15:25:42.703

First off, you can't run your code until the DOM is loaded. That means that you either must place it AFTER the relevant HTML in your source file or use jQuery's method of waiting until the DOM is loaded:

$(document).ready(function() {
    alert($('td[id="4"]').parents().eq(0).attr("id"));
});

Then, your code:

$('td[id="4"]').parents().eq(0)

Is getting the first parent of the matching td element. That first parent will be the tr tag which will alert it's ID, not the <table> element's id as you can see here: http://jsfiddle.net/jfriend00/rxUEp/

If you want the table element's ID, then it's best to specify the actual parent you want with code like this:

$(document).ready(function() {
    alert($('td[id="4"]').closest("table").attr("id"));
});

Further fixing things up, ID values should start with an underscore or a letter, not a number and once you have a valid ID, you should use a much more efficient selector like this:

<table id="Table1" >
    <tr id="tr1">
        <td id="cell3" class="cell" >
           first cell 
        </td>
        <td id="cell4" class="cell">
        second cell
        </td>
    </tr> 
</table>

$(document).ready(function() {
    alert($('#cell4').closest("table").attr("id"));
});

P.S. Another reason it's good to use .closest("table") to find the desired parent is that tables all have an implicit <tbody> tag (even if it's not in your HTML) which means that the actual <table> tag is actually the 3rd parent up from your <td>. With .closest("table"), you don't have to worry about these find details as jQuery just finds the one you have specified.

yes it worked..! thanks . but the issue of valid id is not a problem .It is working fine with the number — zeeshan, Apr 13 '12 at 15:30
@zeeshan - some browsers allow you to use the number for an id, but do you really want to use HTML that some older browsers might not work properly with? It's always safest to follow the rules and costs you nothing. If you're using the number for something else, then don't put it in an ID. Put it in a custom attribute like `data-num="4"` and fetch that with `.data("num")`. — jfriend00, Apr 13 '12 at 15:52

ceejayoz · Answer 2 · 2012-04-13T15:55:42.753

2

You're running code on a table that doesn't exist yet. Move the <script> block below the table and it works (although you're going to be fetching the tr parent, not the table parent), or put it in an onready function so it doesn't fire until the entire DOM is finished.

demo: (alerts twice, one before the table, one after) http://jsfiddle.net/Fzcv4/1/

edited Apr 13 '12 at 15:55

answered Apr 13 '12 at 15:17

ceejayoz

176,543
40
303
368

score 0 · Answer 3 · answered Apr 13 '12 at 15:15

0

If you specifically know which parent element you want, try using closest:

$(function() {
    alert($('td[id="4"]').closest("table").attr("id"));
});

Also, id attributes that begin with numbers are invalid.

answered Apr 13 '12 at 15:15

Rory McCrossan

331,213
40
305
339

1

id attributes that begin with numbers are invalid under HTML 4; HTML5 allows them, and most browsers overlooked that rule anyway. Still not a good idea. – Blazemonger Apr 13 '12 at 15:19

jQuery $.parents() not Functioning Properly

3 Answers3