javascript - jQuery Find Closest Input - Stack Overflow

admin管理员组

文章数量:1345284

I have structure like each image has input below. I have x images on the screen. Each of image has onlick option

onclick="imageClicked(this)"

Function creates border to image and show collapsed input. Image`s border is showing but input is not beign visible.

Here`s the function

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");
        }
    });
}

Here is HTML Structure in Razor View

@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>
}

I have structure like each image has input below. I have x images on the screen. Each of image has onlick option

onclick="imageClicked(this)"

Function creates border to image and show collapsed input. Image`s border is showing but input is not beign visible.

Here`s the function

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");
        }
    });
}

Here is HTML Structure in Razor View

@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>
}

• javascript
• jquery
• asp
• asp-mvc
• razor

Share Improve this question Follow edited Jun 2, 2016 at 14:52 Mohammad 21.5k1616 gold badges5656 silver badges8484 bronze badges asked Jun 2, 2016 at 13:58 miechooymiechooy 3,4221212 gold badges4040 silver badges6666 bronze badges 2

• 1 need the html structure as well.. – Anoop Joshi P Commented Jun 2, 2016 at 13:59
• 1 $(image).closest("input"); but closest() is looking for ancestor and because an input is void element, it cannot have any descendant... – A. Wolff Commented Jun 2, 2016 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Closest will search for the parent elements. Here the input is not the parent element of the image. Its a sibling only. You can use siblings() selector for this purpose.

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

Or you can use,

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

• Get the parent div(since the image and input are under same parent)
• Then find the child input of that parent

本文标签： javascriptjQuery Find Closest InputStack Overflow