CODEWITHSUNDEEP
javascriptjqueryhtml
zeeshan
zeeshan

Reputation: 51

jQuery $.parents() not Functioning Properly

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>

Upvotes: 0

Views: 2570

Answers (3)

ceejayoz
ceejayoz

Reputation: 179994

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/

Upvotes: 2

jfriend00
jfriend00

Reputation: 707218

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.

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 0

Related Questions