通过jquery遍历在表格行上显示/隐藏图像？

Question

我有一些表格（ick！），例如：

<tr id="similar_story">
<td class="title"><a href="/">Title</a> <a href="../"><img id="srcimg" src="source.png" style="display:none"></a></td>
</tr>

重复x次[对于每个相似的故事]，当用户将鼠标悬停在.class行上时，我想要#srcimg（用于该行）。

当该行失去焦点时，＃srcimg应该消失。

通过jquery执行此操作的合适方法是什么？我试着按照以下方式做一些事情：

jQuery('td.title').mouseover(function() {
jQuery.('#srcimg').visible();
});

但是（显然？）在每一行显示#srcimg。然而，我只是想在那个表格行中显示一个。

我想必须进行一些遍历以找到合适的图像？

Answer 1

jQuery('td.title').mouseover(function() {
    jQuery(this).parents("tr:first").find('#srcimg').visible();
});

你应该在图像上交换类的id，tho。 ID用于唯一的元素，类用于分类多个相似元素。

Answer 2

我会使用.live和.closest而不是附加多个鼠标悬停处理程序和.parents。 正如前面的回答所指出的，使用类作为id是唯一的。

jQuery('td.title').live('mouseover', function() {
    jQuery(this).closest("tr").find('img.someClass').visible();
});