jquery access sibling TD in table

Question

I have the following HTML Code. What I'm try to do is to have the div named javaRatingDiv to be displayed once the checkbox with the name java is checked.

I can't seem to figure out how to navigate to the next TD in a table via jquery.

<div id="languages">
   <table style="width:inherit">
   <tr style="height:50px; vertical-align:top">
     <td>Select the languages that you are familiar with and rate your knowledge:</td>
   </tr>
   <tr>
     <table style="width:75%;" align="center">   
     <tr id="tableRow"> 
       <td id="firstTD"><input type="checkbox" name="java" value="java" />&nbsp;Java</td>
       <td id="secondTD" style="width:200px;">
         <div id="javaRatingDiv" style="display:none">
           <input name="javaRating" type="radio" value="1" class="star"/>
           <input name="javaRating" type="radio" value="2" class="star"/>
         </div>
       </td>
     </tr>
     </table>
    </tr>
    </table>
</div>

Answer 1

Since the div has an ID, you can access it directly.

$('#javaRatingDiv');

This will grab the div with ID 'javaRatingDiv'.

Answer 2

For the sake of the question and the case of multiple "javaRatingDivs" this would work inside the checkbox click function:

$(this).parent().next().find('div').show();

.parent() gets the parent element .next() gets the next sibling, such as the NEXT td .find(selector) lets you find something within that sibling

This info is for when you get into the issues of multiple items and NOT having ID's to reference directly. In your above case, $('#javaRatingDiv').show(); would work great as patrick mentioned.