Internet Explorer 7 returns 'undefined' from jQuery class selector

Question

I have a small JavaScript function that (among other things) retrieves the ID of the last element with a certain class name.

var lastRowID = $(".sectionRow:last").attr('id');

It should find elements in a table that looks similar to the following:

<table>
    <tr id="courseSection[0]" class="sectionRow"><td>stuff</td></tr>
    <tr id="courseSection[1]" class="sectionRow"><td>more stuff</td><td><a href="javascript:removeSectionRow(1)">(remove)</a></td><td><a href="javascript:addSectionRow()">(add additional row)</a></td></tr>
</table>

If I do a quick alert(lastRowID), I get 'courseSection[1]' in Chrome, Firefox, and IE8. However, IE7 hates me and says 'undefined'.

Note: I've also tried $(".sectionRow").last().attr('id') to no success.

Any thoughts on what might be going on? Thanks!

Edit: This table was added using javascript on a button click (button shows / adds next part of the form). So it's not static html that was in the DOM at page load.

The removeSectionRow(n) function is called when the remove link is clicked. It removes the specified row, then searches for the last row remaining with class name "sectionRow" in order to give that row a "add additional row" link. The idea being that the user can add and remove rows at will. Here's a screenshot of the finished result to illustrate what I'm probably poorly explaining: http://imgur.com/uXYHj.png

Answer 1

Maybe because it's invalid HTML? You need <td> tags in there. Works in IE8 for me.

http://jsfiddle.net/VCpZq/

Answer 2

The characters [ and ] are not valid ID characters. Perhaps this is causing some issue in IE7.

Test the quantity of elements returned by the selector to see if you are getting the <tr> or not.

alert( $(".sectionRow:last").length );