Question

我正在尝试使用closest()获取位于不同div中的<input>元素。这是标记：

<div class="row">
    <div class="span8">
        <input type="text" disabled="disabled" id="image-name">
    </div>
    <div class="span4">
        <input type="file">
    </div>
</div>

这是脚本

$(document).ready(function(){
    $("input:file").change(function (){
       var fileName = $(this).val();
       //Put the file name inside the disabled <input>
       $(this).closest('input:disabled').val(fileName);
    });
});

但它没有做任何事情。我尝试将input:disabled更改为#image-name，但仍无效。

任何解决方案？

由于

Answer 1

如果您在另一个INPUT元素上有id，为什么使用最近的函数？为什么不只是$（'＃image-name'）？最接近的方法不会像你想象的那样工作。最接近的总是上升到DOM树，直到找到匹配为止。

根据对我最初建议的评论，你可以通过使用jQuery事件绑定器的更精彩版本来获得DRY：

function handler(e, args) {
    $(e.data.elem).val(fileName);
}

$('input:file').bind('change', { elem: '#image-name' }, handler);
$('#other-input').bind('change', { elem: '#other-field' }, handler);

使用事件数据结构参数化的可重用事件处理程序。

Answer 2

因为closest向上移动，而不是横向移动。只是添加，它也开始匹配当前元素。

更通用的方法是使用closest查找共同的祖先，.row，以及find禁用的文本框。您也可以parent，prev和children，假设HTML始终如此。

Answer 3

使用closest转到根父级，然后使用find。

$(this).closest('.row').find('input[disabled]').val(fileName);

Try this

刚才注意到你的输入有ID，所以你可以$('#image-name').val(fileName)

Answer 4

您可以使用：

$(this).closest('.row').find('input:disabled').val(fileName);

因为closest()将遍历DOM树中的祖先。

Jquery nearest（）不适用于不同div中的元素

4 个答案:

Try this