Navigating to a specific element with jQuery

Question

I have a table, trying to figure out how to navigate to the 3.35 and add columns. Is there a way to specify which TD i want to navigate to with jQuery?

Thanks ahead of time!

<table>
 <tbody>
   <tr>
    <td>
       <table>
          <tbody>
             <tr>
               <td><a href="">title</a></td>
               <td><a href="">rating</a></td>
               <td>language</td>
               <td>qty</td>
               <td>3.35</td>
               <td><a href="">add</a></td>
             </tr>
          </tbody>
      </table>       
   </td>
  </tr>
 </tbody>
</table>

Answer 1

Try the :nth-child() selector:

$("tr > td:nth-child(5)")

Answer 2

Dig in: http://api.jquery.com/category/selectors/ and http://api.jquery.com/category/traversing/

There are several different ways to get there. Whatever people will suggest here, you owe it to yourself to go to the source on a basic thing like this so you really understand it for the future.

Answer 3

While you could definitely use the nth-child selector to select the appropriate element, you would be better off actually specifying a class which indicates the type of data in the column.

The reason for this is that the data in your example has an obvious semantic meaning, and it's a good idea to represent that in your html structure.

Then, from there, you would select based on the class, and then use a positional selector in order to determine the row you are working on. In that which case, it would be good to have a unique row id that is stored in the id attribute, which makes selection even easier, since you could use the id selector in jQuery.

This plays into your HTML making more semantic sense as well, since your rows are indiciative of instances of your schema, which is implied by the classes that you are assigning to the elements of your table.