无法使用最接近的 img 标签附加图像 src

Question

我无法使用最近的 img 标签附加图片 src。

当自动完成选项 select 我想填充该行的图像

HTML :

<td>
    <div>
        <img class="participantphoto" src="images/author2.jpg" width="50" />
        <input placeholder="Type a letter to search students" class="form-control searchStudent formbottom" name="student[0][name]" type="text" autocomplete="off">
    </div>
</td>

JS :

$(document).on("focus keyup", "input.searchStudent", function (event) {
    $(this).autocomplete({
        source: 'gdcontroller.php?action=search',
        select: function (event, ui) {
        console.log(ui);
            event.preventDefault();
            this.value = ui.item.label;
            // line below fails
            $(this).parent().closest( ".participantphoto" ).attr("src",ui.item.profile_pic);
        },
        focus: function (event, ui) {
            event.preventDefault();
            this.value = ui.item.label;
        }

    });
});

Answer 1

这不起作用，因为 img .participantphoto 不是输入 .searchStudent 的父级。

您应该使用 .closest('div') 找到最近的 div 然后使用 .find(".participantphoto") 找到带有 class participantphoto 的 img 标签，最后设置属性 src :

$(this).closest('div').find(".participantphoto").attr("src",ui.item.profile_pic);

或者您可以使用 .siblings() 代替：

$(this).siblings(".participantphoto").attr("src",ui.item.profile_pic);

希望对您有所帮助。

Answer 2

closest 从 input 开始找不到 img，因为 img 不是祖先的 input，它是兄弟。

因为它是唯一的 img 兄弟，$(this).siblings("img") 找到它：

$(this).siblings( "img" ).attr("src",ui.item.profile_pic);

或者如果你想使用 class:

$(this).siblings( ".participantphoto" ).attr("src",ui.item.profile_pic);

无法使用最接近的 img 标签附加图像 src

Unable to append image src using closest img tag

javascript

jquery

autocomplete

attr