CODEWITHSUNDEEP
jqueryjquery-traversing
Petrogad
Petrogad

Reputation: 4423

Navigating to a specific element with jQuery

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>

Upvotes: 0

Views: 162

Answers (3)

casperOne
casperOne

Reputation: 74530

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.

Upvotes: 0

user241244
user241244

Reputation:

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.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655189

Try the :nth-child() selector:

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

Upvotes: 1

Related Questions