jQuery contradicting itself

Question

I am encountering a strange issue with jQuery. I am generating a table with row with names:

<tr name='table-row-#'><td>#</td></tr>

where # is an index number (1 to 4 in this case) for as many rows as I fetch from my database [PHP]. I have even commented out and stripped down everything else to replicate the line above.

Consider this:

var keywords = $("[name^=table-row-]");  // Fetch all rows starting with 'table-row-'

alert(keywords.length);  // alerts '4' because 4 objects were found and printed whose name start with the string 'table-row-'

alert(keywords[0].name); // alerts 'undefined', which contradicts the first line

Any idea how this makes sense?

Answer 1

Only form elements with a name attribute get a corresponding name property. A tr is not a form element so it doesn't have one, but you can still get the name attribute instead:

keywords.eq(0).attr('name')

For more information about the differences between properties and attributes see this question.

Answer 2

Someone commented and removed their answer "html elements to not have name properties".

This is the correct answer. I was copy/pasting my own functional code and was referencing the wrong element.

Problem solved.

Answer 3

It's not the keywords[0] part that is undefined, it is the name attribute of that entry.

Use functions like console.log() or any other debugging method to see what exactly is defined and what is not.