Javascript jQuery查找最近的输入

我的结构就像每个图像都有下面的输入。我在屏幕上有x个图像。每个图像都有onlick选项

onclick="imageClicked(this)"

函数创建图像的边框并显示折叠的输入。图像的边框正在显示，但输入不可见

这是函数

function imageClicked(image) {
    var input = $(image).closest("input");
    $(image).css('outline', "solid 2px #5bc0de");
    $(input).css("visibility", "visible");
    $(input).focus();

    $(input).focusout(function () {
        $(image).css('outline', "0");
        if ($(input).val() === "0") {
            $(input).css("visibility", "collapse");
        }
    });
    $(image).focusout(function () {
        if ($(input).val() === "") {
            $(image).css('outline', "0");
        }
    });
}

下面是Razor视图中的HTML结构

@for (int i = 0; i < Model.Boxes.Count; i++){
    var base64 = Convert.ToBase64String(Model.Boxes[i].Photo);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);

    var imageId = Model.Boxes[i].BoxId;
    @Html.HiddenFor(m => m.Boxes[i].BoxId)    
    <div class="col-md-2">
        <img src="@imgSrc" width="50%" alt="@Model.Boxes[i].Name" id="@string.Format("image{0}", imageId)" onclick="imageClicked(this)" />
        @Html.TextBoxFor(m => m.Boxes[i].Quantity, new { @class = "form-control", @style = "visibility: collapse; width: 50%; margin-top: 1%", @id = string.Format("input{0}", imageId) })
    </div>
}

@for（int i=0；im.box[i].BoxId）
@Html.TextBoxFor（m=>m.Boxes[i].数量，新{@class=“form control”，@style=“可见性：折叠；宽度：50%；页边距顶部：1%”，@id=string.Format（“输入{0}”，imageId）}）
}

将搜索父元素。此处输入不是图像的父元素。它只是一个兄弟姐妹。为此，您可以使用sides（）选择器

var input = $(image).siblings("input");

或者你可以用

var input = $(image).closest(".col-md-2").find("input");

• 获取父div（因为图像和输入位于同一父项下）
• 然后查找该父项的子输入

---

也需要html结构。

$（图像）。最近的（“输入”）

但是

最近的（）

正在寻找祖先，因为

输入是无效元素，所以它不能有任何后代。。。