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" /> 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="javaRa开发者_开发问答ting" type="radio" value="2" class="star"/>
</div>
</td>
</tr>
</table>
</tr>
</table>
</div>
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.
Since the div
has an ID, you can access it directly.
$('#javaRatingDiv');
This will grab the div
with ID 'javaRatingDiv'.
精彩评论