javascript表标记粉碎了jquery的next函数

Question

我想创建一个js代码，在插入图像后预览每个输入文件的图像。我的问题是，如果我不在表中使用输入和图像，这是可行的，但如果我在表中输入和图像将不起作用

我的HTML代码是

<table style="width:100%">
<tr>
<td>
<input type="file" class="img-control" />
</td>
<td>
<img class="img-preview" src="#" />
</td>
</tr>
</table>
<br><br>
<input type="file" class="img-control" />
<img class="img-preview" src="#" />
<br><br>
<input type="file" class="img-control" />
<img class="img-preview" src="#" />
<br><br>

我的JS代码是

<script type=text/javascript>
jQuery( document ).ready(function() {
function readURL() {
var $input = jQuery(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$input.next('.img-preview').attr('src', e.target.result).show();
}
reader.readAsDataURL(this.files[0]);
}
}
jQuery(".img-control").change(readURL);
});
</script>

表外的代码标记两个输入都工作，但表内的输入不工作，我想在表内创建我的输入，每个输入都在表内

Answer 1

问题是next()只查找下一个同级，而<input>在<td>内没有同级

尝试更改：

$input.next('.img-preview').attr('src', e.target.result).show();

至

$input.closest('tr').find('.img-preview').attr('src', e.target.result).show();
// OR
$input.parent().next().find('.img-preview').attr('src', e.target.result).show();